在node.js安裝完成之后，全域的包路徑必須有權限寫入(C盤win10可直接配置所有控制權限)
vue-cli是創建vue專案的，可以全域安裝
vue cli的包名稱有vue-cli和@vue/cli，后者是由前者改變而來，使用在新版本上 vue-cli好像用在1.x和2.x版本，之后3.x和4.x版本用的是@vue/cli的包名稱，因此，如果需要安裝舊版本
那么使用
安裝
npm install -g vue-cli
卸載
npm uninstall -g vue-cli如果要從舊版本換到新版本，那自然需要先卸載舊版本再來安裝新版本
安裝新版本的指令（node.js版本也盡量高一些）
npm install -g @vue/cli
帶版本
npm install -g @vue/cli@4.5.0安裝之后前往全域包路徑下看(node_modules下有@vue檔案夾)
打開命令列視窗，輸入如下指令
vue -V (大寫得V)如果沒有刪掉vue.ps1這個檔案，將得到
刪掉vue.ps1后，可以得到vue/cli的版本資訊
創建vue專案的方式有兩種，一是命令列，二是使用界面
命令列創建vue專案
vue create vue-hello
這里的y-s是我原先保存的，選擇的的是vue2.x版本，對應的包有node-sass,babel,router,vuex,eslint,unit-jest
一般這里選擇Manually select features 也就是手動自己配置，鍵盤的上下鍵盤即可選擇
上下箭頭選擇配置項，空格選中，a鍵全選，i鍵反選，選中后enter
Choose Vue version： 選擇vue版本，一般還是2.x版本
Babel：轉碼器
TypeScript：javaScript的一個超集，一般還是使用javaScript
Progressive Web App（PWA）Support：沒用過，啥漸進式WEB應用程式
Router：vue的路由器，web開發很重要的
Vuex：vuex是vue的狀態管理模式，也是需要的
CSS Pre-processors：選擇css樣式 less sass等
Linter / Formatter：代碼風格檢查和格式化
Unit Testing：單元測驗
E2E Testing： 也是測驗，沒用過
選中后的情況如圖，具體每項是什么含義，可多次嘗試后便可看出來,最終可以得到創建的專案檔案內容，
使用圖形化界面創建專案
命令列運行
vue ui
瀏覽器按照地址訪問，可以得到圖形化界面進行管理
專案創建成功后，一般按照最新的vue專案模板，需要單獨建立一個vue的組態檔
檔案名：vue.config.js
module.exports = {
// 專案部署的基礎路徑
// 我們默認假設你的應用將會部署在域名的根部
publicPath: '',
// 將構建好的檔案輸出到哪里（或者說將編譯的檔案）
outputDir: 'dist',
// 放置靜態資源的地方 (js/css/img/font/...)
assetsDir: '',
// 指定生成的 index.html 的輸出路徑 (相對于 outputDir)，也可以是一個絕對路徑 Default: 'index.html'
indexPath:'index.html',
devServer: {
open: true,
host: '0.0.0.0',
port: 8090,
https: false,
hotOnly: false
}
}創建好專案后按照專案內的README.md檔案執行
最終在瀏覽器內打開可以得到
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304114.html
標籤：其他