vue2.0使用(1)：建立新專案
阿新 • • 發佈：2019-01-08
vue版本：2.2.2
vue有兩種專案建立方式，一種是下載vue.js，通過script標籤引入即可；另一種通過vue-cli構建基於webpack的專案，這種專案構建釋出需要部署node環境，不能以檔案的方式直接開啟。
1.全域性安裝vue命令列工具
npm install -g vue-cli
2.建立一個基於webpack模板的新專案
vue init webpack my-project
注：跟“npm init”類似，輸入一系列專案描述與配置，可以不用配置ESLint和單元測試框架。
3.專案建立完成後再安裝基礎模組
cd my-project
npm install
注：第一次安裝了單元測試框架，結果安裝到27%就安裝不下去了，然後顯示失敗。第二次我把單元測試框架也去掉了，很快便安裝完了。
4.安裝完成後執行該專案即可。
npm run dev
專案監聽在8080埠，出現頁面即為成功。
下圖為安裝ESLint和單元測試框架後的檔案結構
.
|-- build // 專案構建相關程式碼
| |-- build.js // 生產環境構建程式碼
| |-- check-version.js // 檢查 node、npm 等版本
| |-- dev-client.js // 熱過載相關
| |-- dev-server.js // 構建本地伺服器
| |-- utils.js // 構建工具相關
| |-- webpack.base
| |-- webpack.dev.conf.js // webpack 開發環境配置
| |-- webpack.prod.conf.js // webpack 生產環境配置
|-- config // 專案開發環境配置
| |-- dev.env.js // 開發環境變數
| |-- index.js // 專案一些配置變數（開發環境介面轉發將在此配置）
| |-- prod.env.js // 生產環境變數
| |-- test.env.js // 測試環境變數
|-- src // 原始碼目錄
| |-- components // vue 公共元件
| |-- store // vuex 的狀態管理
| |-- App.vue // 頁面入口檔案
| |-- main.js // 程式入口檔案，載入各種公共元件
|-- static // 靜態檔案，比如一些圖片，json資料等
|-- test // 自動化測試相關檔案
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義程式碼格式
|-- .eslintignore // ESLint 檢查忽略的檔案
|-- .eslistrc.js // ESLint 檔案，如需更改規則則在此檔案新增
|-- .gitignore // git 上傳需要忽略的檔案
|-- README.md // 專案說明
|-- index.html // 入口頁面
|-- package.json // 專案基本資訊
. 當專案需要釋出時，執行 npm run build命令來打包專案，打包後的存放在dist資料夾下。dist下的頁面不能以檔案的方式開啟，需要通過釋出後才能訪問。 ps:第一次打包後，啟動服務執行結果發現找不到相關的js和css，檢查後發現dist前面多了一條“/”，所以需要在config/index.js裡修改
將assetsPublicPath的值設為‘’；
|-- build // 專案構建相關程式碼
| |-- build.js // 生產環境構建程式碼
| |-- check-version.js // 檢查 node、npm 等版本
| |-- dev-client.js // 熱過載相關
| |-- dev-server.js // 構建本地伺服器
| |-- utils.js // 構建工具相關
| |-- webpack.base
| |-- webpack.dev.conf.js // webpack 開發環境配置
| |-- webpack.prod.conf.js // webpack 生產環境配置
|-- config // 專案開發環境配置
| |-- dev.env.js // 開發環境變數
| |-- index.js // 專案一些配置變數（開發環境介面轉發將在此配置）
| |-- prod.env.js // 生產環境變數
| |-- test.env.js // 測試環境變數
|-- src // 原始碼目錄
| |-- components // vue 公共元件
| |-- store // vuex 的狀態管理
| |-- App.vue // 頁面入口檔案
| |-- main.js // 程式入口檔案，載入各種公共元件
|-- static // 靜態檔案，比如一些圖片，json資料等
|-- test // 自動化測試相關檔案
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義程式碼格式
|-- .eslintignore // ESLint 檢查忽略的檔案
|-- .eslistrc.js // ESLint 檔案，如需更改規則則在此檔案新增
|-- .gitignore // git 上傳需要忽略的檔案
|-- README.md // 專案說明
|-- index.html // 入口頁面
|-- package.json // 專案基本資訊
. 當專案需要釋出時，執行 npm run build命令來打包專案，打包後的存放在dist資料夾下。dist下的頁面不能以檔案的方式開啟，需要通過釋出後才能訪問。 ps:第一次打包後，啟動服務執行結果發現找不到相關的js和css，檢查後發現dist前面多了一條“/”，所以需要在config/index.js裡修改
將assetsPublicPath的值設為‘’；