VUE學習目錄匯總
vue -V查詢vue-cli版本
一、准備工作
1、下載安裝Node.js
下載地址：https://nodejs.org/en/download/ ，選擇合適自己的版本下載即可。 安裝Node.js會默認安裝npm（包管理工具）。
2、啟用cmd
按下Windows+R，在打開的“運行”程序窗口，輸入“cmd”，並按下回車鍵，即可打開系統自帶的命令提示符。
注：默認C盤，切換盤符輸入 D：（輸入你項目所在盤）
3、安裝cnpm
npm是Node.js提供的包管理工具，因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，我們可以用淘寶 npm 鏡像cnpm代替默認的 npm。
方法一：使用npm安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
注：這樣可能會導致npm和cnpm版本可能不一樣。
方法二：用alias 命令設置別名
alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \--disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"
輸入cnpm -v查看cnpm版本，來檢查cnpm是否正確安裝。如未正常安裝請檢查系統變量path是否配置正確。
全局安裝webpack打包工具，指令：npm i -g webpack
全局安裝gulp，指令：npm i -g gulp-cli，卸載指令：npm rm -g gulp
4、安裝vue-cli
使用cnpm全局安裝vue-cli,在cmd中輸入一下命令（注：“-g”這個參數意思是全局安裝)
cnpm install –g vue-cli
二、初始化項目
准備工作做好之后，開始正式初始化項目。選擇webpack作為打包工具，按照提示填寫一些配置。這些配置最終會安裝相應的模塊並且寫到項目的package.json中。
1、新建項目mydemo（繼續上面的操作在cmd里面輸入指令）
vue init webpack mydemo
mydemo是項目名稱，這個名字自己隨便取（不能有大寫字母）。命令輸入后，會進入安裝階段，需要用戶輸入一些信息。
（*指令輸入后，黑屏會依次出現以下信息）
信息詳情：
----------------------------------------------------------------------------------------------------------------------------
Project name (vuetest)
項目名稱，可以自己指定，也可直接回車，按照括號中默認名字。
Project description (A Vue.js project)
項目描述，也可直接點擊回車，使用默認名字。
Author
作者，可以自己指定，也可直接回車。
接下來會讓用戶選擇
Runtime + Compiler: recommended for most users
運行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅運行時，已經有推薦了就選擇第一個了
Install vue-router? (Y/n)
是否安裝vue-router，這是官方的路由，大多數情況下都使用，這里就輸入“y”后回車即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響整體的運行。
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試。
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試。
----------------------------------------------------------------------------------------------------------------------------
（*現在你的項目盤里面已經出現了以mydemo命名的文件夾）
用編輯器打開項目，目錄結構大致是這樣的。
目錄介紹：
----------------------------------------------------------------------------------------------------------------------------
bulid
里面是一些操作文件，使用npm run * 時其實執行的就是這里的文件。
config
配置文件，執行文件需要的配置信息。
src
資源文件，所有的組件以及所用的圖片都是在這個文件夾下放着。簡單看一下這個文件夾下都放了哪些東西。
assets
資源文件夾，放圖片之類的資源，
components
組件文件夾，寫的所有組件都放在這個文件夾下，
router
路由文件夾，這個決定了頁面的跳轉規則，
App.vue
應用組件，所有自己寫的組件，都是在這個組件之上運行了。
main.js
webpack入口文件。
----------------------------------------------------------------------------------------------------------------------------
1、在mydemo下安裝依賴（若項目下已經有node_modules文件夾，可以忽略此項）
切換到項目目錄
cd mydemo
安裝模塊
cnpm install
它根據package.json的配置表進行安裝，安裝完后會在mydemo下多一個文件夾node_modules，這里的文件對應着package.json里的配置信息。
2、運行mydemo（先切換到項目文件夾： cd mydemo 再輸入 npm run dev回車）
輸入命令
npm run dev
打開瀏覽器，在瀏覽器輸入地址http://localhost:8080，看到如下頁面，說明大功告成，一個Vue項目已經初始化完成
使用vue-cli構建生成的項目目錄結構。
步驟1：
將package.json中的"private": true改為"private": false。
步驟2：
進入到文件夾config下的index.js中，會發現module.exports暴漏出了兩種配置。
一種是dev{...}，這表示開發環境配置。還有一種是build{...}，這表示的才是我們構建版本時所需要配置的信息項。
在build中找到assetsPublicPath: '/'修改為assetsPublicPath: './'。
在build中找到productionSourceMap: true修改為productionSourceMap: false。
步驟3：
在根目錄的命令行中輸入npm run build
當根目錄出現dist文件夾時證明打包成功。
webpack打包。
cmd輸入npm run build，生成dist文件
使用 npm i webpack-dev-server -D 安裝webpack-dev-server
npm run dev 生成配置http://localhost:8080，在瀏覽器輸入http://localhost:8080查看頁面，修改頁面代碼，刷新會自動更新