先給大家啰嗦一下我遇到的坑： 我安裝的是nvm，然後 安裝的 yarn 。
問題：在安裝vue3.0腳手架的時候，問題出現了， vue -V 不是内部或者外部指令。
解決方案 ： 往下看 二：安裝腳手架
我開始在電腦上安裝的nvm ，然後安裝的node， 備注：安裝nvm必須先把node解除安裝
一.安裝 nvm 詳細的步驟：
如果已經單獨安裝了node，建議解除安裝，然後開始按鈕nvm
1. 先下載下傳nvm 安裝包： https://github.com/coreybutler/nvm-windows/releases ，選擇 nvm-setup.zip 下載下傳後直接安裝
2.安裝目錄
這個是nvm 的目錄，可以随便選。
node預設不變
3.驗證是否安裝成功
4.安裝node.js
指令使用: nvm install <version> [<arch>] 指令下載下傳需要的版本，arch參數表示系統位數，預設是64位作業系統。如果是32位作業系統，需要執行指令： nvm install 12.18.4 32
64位作業系統執行指令: nvm install 12.18.4
5.驗證安裝成功
6.這裡說一下為什麼用nvm ?
nvm 可以切換不同的node版本，，比如你安裝了 2個版本的nodejs ，（12.18.4 和6.10.3 ）
需要切換使用指令：nvm use 6.10.3
7.檢視nvm 的所有指令： nvm -v
二：安裝腳手架
上面說了我安裝的是nvm 和 jarn (所有出現了vue -V 不是内部或外部指令
怎麼解決并繼續：往下看
1.先安裝npm 淘寶鏡像
指令：npm i -g cnpm --registry=https://registry.npm.taobao.org
2.安裝 vue-cli3.0 ，這裡是重點 @代表的是3.0
注意：安裝vue-cli3.0之前，如果本地全局安裝過 vue-cli， 需要先進行解除安裝
解除安裝成功後 開始 安裝vue-cli3 以上版本
- //指定版本安裝 npm install -g @vue/[email protected]
- //安裝vue-cli3最新版 npm install -g @vue/cli ，我們這裡安裝最新版
cnpm install -g @vue/cli
# or
yarn global add @vue/cli
3.安裝成功後 驗證：vue -V (特别注意：V大寫)
開始建立項目：
vue crate 項目名稱
指令：vue create item_web
如果沒有配置儲存過，則隻有以下兩個選項：
② default（babel，eslint）：預設設定（直接enter）非常适合快速建立一個新項目的原型，沒有帶任何輔助功能的 npm包
③ Manually select features：手動配置（按方向鍵 ↓）是我們所需要的面向生産的項目，提供可選功能的 npm 包
我們選擇 Manually select features ,然後按回車
手動配置，根據你需要用方向鍵選擇（按 “空格鍵”選擇/取消選擇，A鍵全選/取消全選）對應功能
描述：根據自己需求選
選擇完後直接enter，然後會提示你選擇對應功能的具體工具包，選擇自己擅長或者使用廣泛的（友善遇到問題時百度），簡介如下：
① 首先會讓你選擇是否使用history router：Vue-Router 利用了浏覽器自身的hash 模式和 history 模式的特性來實作前端路由（通過調用浏覽器提供的接口）
hash： 浏覽器url址欄 中的 # 符号（如這個 URL：http://www.abc.com/#/hello，hash 的值為“ #/hello”），hash 不被包括在 HTTP 請求中（對後端完全沒有影響），是以改變 hash 不會重新加載頁面
history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏覽器支援）
② css預處理器：主要為css解決浏覽器相容、簡化CSS代碼 等問題（ Sass誕生于2007年，最早也是最成熟的一款CSS預處理器語言）
下一步：*③ 何時檢測：**
④如何存放配置 ：
⑤ 是否儲存本次配置（之後可以直接使用）：
後面藍色是選中的
如果你安裝了npm 也安裝了Yarn ,,,,這裡就會讓你選擇，我選的npm
開始建立，耐心等待，建立完成 如下：
項目目錄結構
② router （路由）：
vue cli 2 ：“ router/index.js ”
vue cli 3：“router.js”（用法和做的事都一樣）
③ 去掉 static 、 新增 public 檔案夾
vue cli 2：static 是 webpack 預設存放靜态資源的檔案夾，打包時會直接複制一份到dist檔案夾不會經過 webpack 編譯
vue cli 3 ：摒棄 static 新增了 public 。vue cli 3 中“靜态資源”兩種處理方式：
- 經webpack 處理：在 JavaScript 被導入或在 template/CSS 中通過“相對路徑”被引用的資源會被編譯并壓縮
- 不經webpack 處理：放置在
public
④ index.html ：
vue cli 2 ：“index.html ”
vue cli 3 ：“public/index.html ”此模闆會被 html-webpack-plugin 處理的
⑤ src/views：vue cli 3 的 src檔案夾 新增 views檔案夾 用來存放 “頁面”，區分 components（元件）
⑥ 去掉 build（根據config中的配置來定義規則）、config（配置不同環境的參數）檔案夾 ：
vue cli 3 中 ，這些配置 你可以通過 指令行參數、或
vue.config.js
（在根目錄 建立一個 vue.config.js 同名檔案）裡的 devServer 字段配置開發伺服器
⑦ babel.config.js：配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式
babel.config.js
。和
.babelrc
或
package.json
中的
babel
字段不同，這個配置檔案不會使用基于檔案位置的方案，而是會一緻地運用到項目根目錄以下的所有檔案，包括
node_modules
内部的依賴。官方推薦在 Vue CLI 項目中始終使用
babel.config.js
取代其它格式。
⑧ 根目錄的一些其他檔案的改變：之前所有的配置檔案都在vue create 搭建時preset預設 或者 後期可以通過 指令參數 、
vue.config.js 中配置
根據需要在根目錄下建立 vue.config.js自行配置，eg：簡單配置，更多配置詳情參見官網：[https://cli.vuejs.org/zh/config/](https://cli.vuejs.org/zh/config/)
module.exports = {
baseUrl: '/',// 部署應用時的根路徑(預設'/'),也可用相對路徑(存在使用限制)
outputDir: 'dist',// 運作時生成的生産環境建構檔案的目錄(預設''dist''，建構之前會被清除)
assetsDir: '',//放置生成的靜态資源(s、css、img、fonts)的(相對于 outputDir 的)目錄(預設'')
indexPath: 'index.html',//指定生成的 index.html 的輸出路徑(相對于 outputDir)也可以是一個絕對路徑。
pages: {//pages 裡配置的路徑和檔案名在你的文檔目錄必須存在 否則啟動服務會報錯
index: {//除了 entry 之外都是可選的
entry: 'src/index/main.js',// page 的入口,每個“page”應該有一個對應的 JavaScript 入口檔案
template: 'public/index.html',// 模闆來源
filename: 'index.html',// 在 dist/index.html 的輸出
title: 'Index Page',// 當使用 title 選項時,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在這個頁面中包含的塊，預設情況下會包含,提取出來的通用 chunk 和 vendor chunk },
subpage: 'src/subpage/main.js'//官方解釋：當使用隻有入口的字元串格式時,模闆會被推導為'public/subpage.html',若找不到就回退到'public/index.html',輸出檔案名會被推導為'subpage.html' },
lintOnSave: true,// 是否在儲存的時候檢查
productionSourceMap: true,// 生産環境是否生成 sourceMap 檔案
css: { extract: true,// 是否使用css分離插件 ExtractTextPlugin
sourceMap: false,// 開啟 CSS source maps
loaderOptions: {},// css預設器配置項
modules: false// 啟用 CSS modules for all css / pre-processor files.
},
devServer: {// 環境配置
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
open: true, //配置自動啟動浏覽器
proxy: {// 配置多個代理(配置一個 proxy: 'http://localhost:4000' )
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
},
pluginOptions: {// 第三方插件配置 // ...
}
};