更新文檔,具體做出來的項目已經整理的相關的教程, 我直接貼過來吧.
Node.js 安裝
Node.js 安裝包及源碼下載地址為：https://nodejs.org/en/download/。 你可以根據不同平台系統選擇你需要的 Node.js 安裝包。
Windows 上安裝 Node.js
Windows 安裝包(.msi)
32 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi 64 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
本文實例以 v0.10.26 版本為例做演示，其他版本類似（根據實際項目情況選擇版本安裝）， 安裝步驟： 步驟 1 : 雙擊下載后的安裝包 v0.10.26 步驟 2 : 點擊以上的Run(運行),點擊 next（下一步） 按鈕 步驟 3 : 勾選接受協議選項，點擊 next（下一步） 按鈕 步驟 4 : Node.js默認安裝目錄為 "C:\Program Files\nodejs" , 你可以修改目錄，並點擊 next（下一步） 步驟 5 : 點擊樹形圖標來選擇你需要的安裝模式 , 然后點擊下一步 next（下一步） 步驟 6 :點擊 Install（安裝） 開始安裝Node.js。你也可以點擊 Back（返回）來修改先前的配置。 然后並點擊 next（下一步）
檢測PATH環境變量是否配置了Node.js，點擊開始=》運行=》輸入"cmd" => 輸入命令"path"，輸出如下結果： PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32; C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0; c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib; C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs; C:\Users\rg\AppData\Roaming\npm
我們可以看到環境變量中已經包含了C:\Program Files\nodejs\
檢查Node.js版本,命令：node -v
Linux 上安裝 Node.js
直接使用已編譯好的包 Node 官網已經把 linux 下載版本更改為已編譯好的版本了，我們可以直接下載解壓后使用：
wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下載
tar xf node-v10.9.0-linux-x64.tar.xz // 解壓
cd node-v10.9.0-linux-x64/ // 進入解壓目錄
./bin/node -v // 執行node命令 查看版本
v10.9.0
解壓文件的 bin 目錄底下包含了 node、npm 等命令，我們可以使用 ln 命令來設置軟連接： ln -s /usr/software/nodejs/bin/npm /usr/local/bin/ ln -s /usr/software/nodejs/bin/node /usr/local/bin/
Ubuntu 源碼安裝 Node.js
以下部分我們將介紹在 Ubuntu Linux 下使用源碼安裝 Node.js 。 其他的 Linux 系統，如 Centos 等類似如下安裝步驟。
在 Github 上獲取 Node.js 源碼：
$ sudo git clone https://github.com/nodejs/node.git Cloning into 'node'... 修改目錄權限：
$ sudo chmod -R 755 node 使用 ./configure 創建編譯文件，並按照：
$ cd node $ sudo ./configure $ sudo make $ sudo make install 查看 node 版本：
$ node --version v0.10.25
Ubuntu apt-get命令安裝
命令格式如下：
sudo apt-get install nodejs sudo apt-get install npm CentOS 下源碼安裝 Node.js 1、下載源碼，你需要在https://nodejs.org/en/download/下載最新的Nodejs版本，本文以v0.10.24為例:
cd /usr/local/src/ wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz 2、解壓源碼
tar zxvf node-v0.10.24.tar.gz 3、 編譯安裝
cd node-v0.10.24 ./configure --prefix=/usr/local/node/0.10.24 make make install 4、 配置NODE_HOME，進入profile編輯環境變量
vim /etc/profile 設置 nodejs 環境變量，在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 一行的上面添加如下內容:
set for nodejs
export NODE_HOME=/usr/local/node/0.10.24 export PATH=$NODE_HOME/bin:$PATH :wq保存並退出，編譯/etc/profile 使配置生效
source /etc/profile 驗證是否安裝配置成功
node -v 輸出 v0.10.24 表示配置成功
npm模塊安裝路徑
/usr/local/node/0.10.24/lib/node_modules/ 注：Nodejs 官網提供了編譯好的 Linux 二進制包，你也可以下載下來直接應用。
Vue.js 安裝
NPM 方法 大家都知道國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。
淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。
你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
$ npm install -g --registry=https://registry.npm.taobao.org
在用 Vue.js 構建大型應用時推薦使用 NPM 安裝：
最新穩定版
$ npm install vue
命令行工具 Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。
全局安裝 vue-cli
$ npm install --global vue-cli
創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
這里需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project ? Project description A Vue.js project ? Author runoob ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
進入項目，安裝並運行： $ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms
Listening at http://localhost:8080
4、可視化管理之（vue ui） vue-cli 3.0 版本為我們提供了集 創建、管理、分析 為一體的可視化界面vue ui：
安裝最新版的vue-cli
npm install -g @vue/cli
檢查vue-cli版本
vue -V
運行 vue ui
vue ui
Vue CLI 3 項目構建基礎配置
查看 node 版本
node -v
查看 npm 版本
npm -v
腳手架vue-cli
安裝 Vue CLI 3.x
npm i -g @vue/cli 安裝完 vue-cli 后，我們在你想要創建的項目目錄地址下執行構建命令
my-project 是你的項目名稱
vue create my-project
可視化界面
除了使用上述命令行構建外， vue-cli 3.x 還提供了可視化的操作界面，在項目目錄下我們運行如下命令開啟圖形化界面： 
webpack 在 CLI 3 中的應用
3.1 與 vue-cli 2.x 的差異 如果你使用過 vue-cli 2.x ，那么你應該了解其構建出的目錄會包含相應的 webpack 配置文件，但是在 vue-cli 3.x 中你卻見不到一份關於 webpack 的配置文件，難道 3.x 拋棄了 webpack？其實不然， 3.x 提供了一種開箱即用的模式，即你無需配置 webpack 就可以運行項目，並且它提供了一個 vue.config.js 文件來滿足開發者對其封裝的 webpack 默認配置的修改
vue.config.js 的配置 a. baseurl 你想要將項目地址加一個二級目錄，比如： http://localhost:8080/vue/ ，那么我們需要在 vue.config.js 里配置 baseurl 這一項
// vue.config.js module.exports = { ...
baseUrl: 'vue',
...
} 其改變的其實是 webpack 配置文件中 output 的 publicPath 項，這時候你重啟終端再次打開頁面的時候我們首頁的 url 就會變成帶二級目錄的形式。
b. outputDir 如果你想將構建好的文件打包輸出到 output 文件夾下（默認是 dist 文件夾），你可以配置
// vue.config.js module.exports = { ...
outputDir: 'output',
...
} 然后運行命令 yarn build 進行打包輸出，你會發現項目跟目錄會創建 output 文件夾， 這其實改變了 webpack 配置中 output 下的 path 項，修改了文件的輸出路徑
c. productionSourceMap 該配置項用於設置是否為生產環境構建生成 source map ，一般在生產環境下為了快速定位錯誤信息，我們都會開啟 source map ：
// vue.config.js module.exports = { ...
productionSourceMap: true,
...
} 該配置會修改 webpack 中 devtool 項的值為 source-map
d. chainWebpack chainWebpack 配置項允許我們更細粒度的控制 webpack 的內部配置，其集成的是 webpack-chain 這一插件，該插件可以讓我們能夠使用鏈式操作來修改配置，比如
// 用於做相應的合並處理 const merge = require('webpack-merge');
module.exports = { ...
// config 參數為已經解析好的 webpack 配置
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.tap(options =>
merge(options, {
limit: 5120,
})
)
}
...
} 以上操作我們可以成功修改 webpack 中 module 項里配置 rules 規則為圖片下的 url-loader 值，將其 limit 限制改為 5M，修改后的 webpack 配置代碼如下：
{ ...
module: {
rules: [
{
/* config.module.rule('images') */
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [
/* config.module.rule('images').use('url-loader') */
{
loader: 'url-loader',
options: {
limit: 5120,
name: 'img/[name].[hash:8].[ext]'
}
}
]
}
]
}
...
} e. configureWebpack 除了上述使用 chainWebpack 來改變 webpack 內部配置外，我們還可以使用 configureWebpack 來進行修改，兩者的不同點在於 chainWebpack 是鏈式修改，而 configureWebpack 更傾向於整體替換和修改。示例代碼如下
// vue.config.js module.exports = { ...
// config 參數為已經解析好的 webpack 配置
configureWebpack: config => {
// config.plugins = []; // 這樣會直接將 plugins 置空
// 使用 return 一個對象會通過 webpack-merge 進行合並，plugins 不會置空
return {
plugins: []
}
}
...
} configureWebpack 可以直接是一個對象，也可以是一個函數，如果是對象它會直接使用 webpack-merge 對其進行合並處理，如果是函數，你可以直接使用其 config 參數來修改 webpack 中的配置，或者返回一個對象來進行 merge 處理
你可以在項目目錄下運行 vue inspect 來查看你修改后的 webpack 完整配置，當然你也可以縮小審查范圍，比如
只查看 plugins 的內容
vue inspect plugins f. devServer vue.config.js 還提供了 devServer 項用於配置 webpack-dev-server 的行為，使得我們可以對本地 服務器 進行相應配置，我們在命令行中運行的 npm serve 對應的命令 vue-cli-service serve 其實便是基於 webpack-dev-server 開啟的一個本地服務器，其常用配置參數如下
// vue.config.js module.exports = { ...
devServer: {
open: true, // 是否自動打開瀏覽器頁面
host: '0.0.0.0', // 指定使用一個 host。默認是 localhost
port: 8080, // 端口地址
https: false, // 使用https提供服務
proxy: null, // string | Object 代理設置
// 提供在服務器內部的其他中間件之前執行自定義中間件的能力
before: app => {
// `app` 是一個 express 實例
}
}
...
}
快速配置多環境變量
vue-cli3 搭建的項目其實看起來比 cli2 簡單明了很多，官方也有相關文檔對多環境變量配置的描述。https://cli.vuejs.org/zh/guide/mode-and-env.html
1.首先： 通過為 .env 文件增加后綴來設置某個模式下特有的環境變量 通過傳遞 --mode 選項參數為命令行覆寫默認的模式
在項目的根目錄新建3個文件夾，分別對應開發（dev），測試（test），生產（prod） 文件命名： .env.dev , .env.test , .env.prod
接下來是不同文件里面的代碼情況，
.env.dev
NODE_ENV = 'development' VUE_APP_CURRENTMODE = 'dev' VUE_APP_BASEURL = '本地開發api地址'
.env.test
NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'test' VUE_APP_BASEURL = '測試環境api地址'
.env.prod
1.NODE_ENV = 'production' VUE_APP_CURRENTMODE = 'prod' VUE_APP_BASEURL = '正式環境api地址'
2.修改package.json 腳本：
3.最后總結： npm run dev //本地運行 npm run build:test //測試環境打包 npm run build:pro //正式環境打包
一段時間 果不其然又開始搞了，遇到的問題自己記錄一下
1. ERR! errno 126 解決辦法
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm insta
2. Unexpected end of JSON input while parsing near '…"報錯解決方法，加載依賴包加載不了。或者加載速度太慢，依次運行這三個命令
（1）npm install --registry=https://registry.npm.taobao.org --loglevel=silly
（2）npm cache clean --force
（3）npm install
3. 報錯內容：
Error - [sass] Error: Missing binding C:\Users\chuanbiao.liu\helloworld-webpart\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x
Found bindings for the following environments:
- Windows 64-bit with Node.js 8.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
[16:48:42] Error - 'sass' sub task errored after 1.53 s
Missing binding C:\Users\chuanbiao.liu\helloworld-webpart\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x
Found bindings for the following environments:
- Windows 64-bit with Node.js 8.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
解決：執行npm install node-sass 后執行 npm rebuild node-sass 命令。