vue+webpack的快速使用指南（新手向）

1、vue有兩種使用方式：

1.下載vue.js

<script src="vue.js"></script>

2.使用npm

npm install vue

2、在vue的mvc思想基礎上，會有不少想實現的功能，能夠沒必要原生寫。好比ajax請求，各類插件。

安裝vue-cli，促使這些插件能夠在vue上運行。

npm install vue-cli -g

3、vue安裝成功測試

cmd 中,(vue各類模板)

vue -V

vue list

4、使用vue，結合webpack開發。

從vue的角度講，使用了模塊化編寫代碼。

從webpack的角度講，編譯後的代碼，頁面全是js寫的，別人看不懂，也壓縮了文件大小。

5、vue+webpack簡單流程操做

一、文件夾中、shift+右鍵，選擇「在此處打開命令窗口」

vue init webpack test

test是項目名字

二、

1.項目名字，
2.項目描述，
3.項目做者，
4.使用vue什麼模式，
5.是否安裝vue路由，
6.是否使用eslint檢查代碼（建議no，嚴格要求es6編碼），
7.不知道，
8.不知道，

三、進入項目文件夾，shift+右鍵，選擇「在此處打開命令窗口」

npm install

此步驟就是安裝package.json中預設，要裝的插件。

四、

1.build，vue能進行模塊化編寫，就靠它配置文件
2.config，webpack能打包，就靠它配置文件
3.dist，這個是打包後纔出現的文件夾。裏面裝的就是打包後的項目文件
4.node_modules，安裝vue各類插件的地方
5.src，項目編寫的地方 assets，裝資源的地方，圖片，字體等

components，裝模塊，或者網頁的地方。文件均爲**.vue

router，配置路由，哪一個地址，分配component下的哪一個網頁

App.vue,自己就是個components掛在外面的index.html上。index至關於投資人，甩手掌櫃，App.vue至關於職業經理人，網頁的事它主管。

main.js,和主管App.vue配套的，主管js。

6.static，有它可使用git項目版本管理
7.index.html，vue網頁入口
8.package.json ,內置初始插件名稱。後期再安裝插件，npm i 插件名 --save ，能夠保存進文件內

五、.vue能夠當作是.html，都有標籤代碼區域，js區域，css樣式區域。

又不一樣於.html，做用域都是獨立的。因此js引用必須import導入，export導出。

六、運行項目
項目文件中，shift+右鍵，選擇「在此處打開命令窗口」

npm run dev 
npm run build 
npm start

dev就是webpack的開發模式，開發模式，就是壓縮文件以前
build就是項目完成後開始壓縮文件，文件夾中出現dist文件夾，裏面就是壓縮後的項目
進入dist文件夾，shift+右鍵，選擇「在此處打開命令窗口」 （運行項目）

完結~而後就能夠開始專一於代碼的編寫~空缺錯誤之處，歡迎指導~