vue-list 可以查看vue所有的組件；

 

 

選用模板常用的是webpack與webpack-simple。webpack-simple是基於Webpack@2.1.0-beta.25進行配置的版本，而webpack模板則是基於Webpack ^1.3.2配置的。

其中，最大的區別是webpack-simple沒有vue-router的中間件，不需要路由時推薦使用；

同時webpack-simple沒有格式的檢測。（個人認為不太重要），

使用webpack模板時格式檢測也是可以不選的。

 

安裝webpack-simple

第一步

npm install -g vue-cli  g(全局環境)  安裝vue-cli；

安裝完成後；

vue init webpack-simple 項目的名稱

接下來，會出現Project name輸入請求，也就是給項目取名，不用管，採用默認即可，按回車鍵
然後是項目描述，可寫可不寫，繼續按回車
之後是作者，繼續按回車
Use sass 一種css語法規則，同樣沒太大關係，輸入y，按回車
出現代碼提示，沒有報錯，説明webpack-simple已經安裝完畢，接下來按照出現的代碼提示進行操作
首先，找到自己的項目文件夾（myapp是我取得文件夾名，需要改為你之前取得的項目文件夾名），輸入：
cd myapp 然後激活npm
npm install 最後運行此框架
npm run dev 等待頁面的自動彈出，到此，後台就已經搭建完成，之後就是對內容的編寫了。

這樣一個vue-cli項目就創建成功了

 

然後當我們使用vue-cli腳手架完成一個項目的時候，我們在本地調試的時候只要命令行執行npm run dev就可以把這個項目跑起來，

但是現在我們要把他放到服務器上的話用npm run build命令進行項目打包就可以啦。

 

打包的過程:

命令行執行npm run build命令，命令需要在項目目錄下執行；

打包完成後會在項目中生成dist文件夾；其中裏面的Index.html就是入口文件；

當你直接打開Index.html的時候就會報以下錯誤:

這是因為引用資源的路徑問題，我們只要在下圖的地方修改一下再打包就可以了。

一般情況router開啓了history模式，如果是本地打包後訪問的話，是沒有問題的，

但是一旦部署到服務器上面，還需要在服務端進行配置修改，在index.js中去除掉history模式。