引用Vue.js
把從官網(wǎng)下載回來的Vue.js放在項目文件夾中并且用Script引用即可攒钳，如下圖:
image.png
CDN
- 對于制作原型或學習，可以這樣使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script> - 對于生產環(huán)境，推薦鏈接到一個明確的版本號和構建文件中狂，以避免新版本造成的不可預期的破壞：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
Vue CLI(腳手架)
在使用Vue腳手架之前要先配置好node.js、npm和cnpm環(huán)境考传。
- 配置node.js和npm
先在官網(wǎng)下載node.js下載并安裝好吃型，我安裝在D:\nodejs。
node.js官網(wǎng):http://nodejs.cn/download/
安裝完畢后在命令行輸入以下命令測試是否安裝成功僚楞，正確會出現(xiàn)版本號
npm -v - 改變原有環(huán)境變量
配置npm的全局模塊的存放路徑以及cache的路徑,輸入以下命令:
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
輸入完命令后會在NodeJs下建立"node_global"及"node_cache"兩個文件夾勤晚。
image.png
注意:如果沒有出現(xiàn)node_cache的同學也不用著急，繼續(xù)往下面做即可泉褐。
在系統(tǒng)環(huán)境變量添加系統(tǒng)變量NODE_PATH赐写。
輸入路徑D:\nodejs\node_global\node_modules，如下圖所示:
image.png
此后所安裝的模塊都會安裝到該路徑下膜赃。
在命令行輸入以下命令試著安裝express（注：“-g”這個參數(shù)意思是裝到global目錄下挺邀，也就是上面說設置的“D:\nodejs\node_global”里面。）
npm install express -g安裝完畢后可以看到.\node_global\node_modules\express 已經(jīng)有內容跳座。
image.png
在命令行輸入node進入編輯模式端铛，輸入以下代碼測試是否能正常加載模塊：
node
require('express')
image.png
注意:如果沒能出現(xiàn)以上界面的同學請按以下步驟添加環(huán)境變量。
1.打開path系統(tǒng)環(huán)境變量并且編輯
image.png
2.添加變量D:\nodejs\node_global\node_modules疲眷，如圖:
image.png
3.重啟cmd或者powershell后再重復之前的步驟就可以出現(xiàn)那個界面了禾蚕。
至此，node.js和npm環(huán)境搭建完畢狂丝。
- 配置cnpm環(huán)境
輸入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入cnpm -v輸入是否正常换淆，這里肯定會出錯。
cnpm -v
因為cnpm會被安裝到D:\nodejs\node_global下几颜，而系統(tǒng)變量path并未包含該路徑倍试。在系統(tǒng)變量path下添加該路徑即可正常使用cnpm，如下圖配置:
image.png
注意:配置完全局變量要重啟cmd或者powershell蛋哭。
在末尾加上分號和D:\nodejs\node_global
最后簡單輸入一下cnpm和cnpm -v命令來檢查是否配置成功县习。
image.png
至此，cnpm環(huán)境搭建成功谆趾。
- 搭建Vue CLI
使用npm來安裝vue-cli
npm install --global vue-cli
因為我們之前配置過環(huán)境變量准颓，所以此時vue-cli會安裝在D盤的nodejs的D:\nodejs\node_global\node_modules目錄下，如下圖:
image.png
我們輸入vue來檢查是否安裝成功棺妓，如下圖:
image.png
至此攘已，vue-cli安裝成功。 - Vue CLI的簡單說明
1.減少重復性工作怜跑，不再需要復制其他項目再刪除無關代碼样勃，或從零創(chuàng)建一個項目和文件吠勘。
2.根據(jù)交互動態(tài)生成項目結構和配置文件等。
3.多人協(xié)作更為方便峡眶，不需要把文件傳來傳去剧防。 -
Vue CLI實現(xiàn)思路
vie.png - Vue CLI構建一個項目
輸入vue list查看可用的模板，如下圖:
image.png
輸入vue init webpack vue-demo創(chuàng)建一個名為vue-demo的webpack模板的項目辫樱。
我們先cd Desktop進入桌面峭拘。
如果出現(xiàn)中文亂碼問題，可以輸入CHCP 65001狮暑，這樣字符編碼格式設成utf-8鸡挠。
接下來會以一問一答的形式自定義構建項目。
1.第一個問題
Project name (vue-demo)： -----項目名稱搬男，直接回車拣展，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters）缔逛。
image.png
2.第二個問題
Project description (A Vue.js project)： ----項目描述备埃，也可直接點擊回車，使用默認名字褐奴。
3.第三個問題
Author ()： ----作者的名稱按脚。
4.第四個問題(選擇題)
Runtime + Compiler: recommended for most users 運行加編譯，既然已經(jīng)說了推薦敦冬，就選它了乘寒。
image.png
5.第五個問題
Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由匪补，大多數(shù)情況下都使用，這里就輸入“y”后回車即可烂翰。
6.第六個問題
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼夯缺，ESLint是個代碼風格管理工具，是用來統(tǒng)一代碼風格的甘耿，一般項目中都會使用踊兜。
7.第七個問題
Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格佳恬，直接y回車捏境。
8.第八個問題
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車毁葱。
9.第九個問題
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 垫言，我選擇安裝y回車。
最后一個問題 我們選擇No,I will handle that myself
耐心等待后會發(fā)現(xiàn)桌面多了個vue-demo文件夾(因為我們之前cd Desktop倾剿，所以會生成在桌面)筷频，如下圖所示:
image.png
我們cd進入這個文件夾后cnpm install安裝依賴蚌成。
說明:
cnpm install ：安裝所有的模塊，如果是安裝具體的哪個個模塊凛捏，在install 后面輸入模塊的名字即可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件里面是不允許有任何注釋的），每個使用npm管理的項目都有這個文件秋度，是npm操作的入口文件都伪。因為是初始項目，還沒有任何模塊示罗，所以我用cnpm install 安裝所有的模塊惩猫。安裝完成后，目錄中會多出來一個node_modules文件夾鹉勒，這里放的就是所有依賴的模塊帆锋。
image.png
最后我們輸入npm run dev，等待編譯完成后會出現(xiàn)以下畫面:
image.png
此時我們在瀏覽器輸入http://localhost:8080
image.png
至此禽额，項目構建完成锯厢。
我們輸入ctrl+c即可關閉服務器。
image.png -
webpack項目結構
我們用vs code打開vue-demo文件夾
QQ截圖20190720162756.jpg
從package.json可以看到開發(fā)和生產環(huán)境的入口脯倒。
image.png - 可以看到dev中的設置实辑，build/webpack.dev.conf.js，該文件是開發(fā)環(huán)境中webpack的配置入口藻丢。
- 在webpack.dev.conf.js中出現(xiàn)webpack.base.conf.js剪撬，這個文件是開發(fā)環(huán)境和生產環(huán)境，甚至測試環(huán)境悠反，這些環(huán)境的公共webpack配置残黑。可以說斋否，這個文件相當重要梨水。
- 還有config/index.js 、build/utils.js 茵臭、build/build.js等疫诽，具體請看這篇介紹：
https://segmentfault.com/a/1190000008644830 - 項目打包上線
注意，自己的項目文件都需要放到 src 文件夾下旦委。
在項目開發(fā)完成之后奇徒，可以輸入npm run build來進行打包工作。
打包完成后缨硝，會生成 dist 文件夾摩钙，如果已經(jīng)修改了文件路徑，可以直接打開本地文件查看查辩。
項目上線時腺律，只需要將 dist 文件夾放到服務器就行了奕短。
