1、安裝WebStorm；

2、啟用WebStorm：https://blog.csdn.net/qq_40147863/article/details/81317709

3、安裝全域性腳手架：npm install -g vue-cli

4、初始化專案demo：

　　vue init webpack demo

　　輸入完成後會跳出各種選項：

• Project name (demo) 專案名稱，預設括號內名稱
• Project description (A Vue.js project) 專案描述，括號內預設也可以自定義輸入回車
• Author () 作者資訊
• Runtime + Compiler: recommended for most users 執行加編譯，預設就可以
• Install vue-router? (y/n) 是否安裝vue-router,建議安裝
• 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測試

　　或者開啟webstorm，點選New Project，然後選擇新建vue.js工程，輸入相關引數，點選Next，然後調整各種選項引數，或者保持預設值並一路Next.

5、啟動專案：npm run start，完成後在瀏覽器中開啟：http://localhost:8080即可檢視到頁面；

　　注：安裝依賴命令：npm install

6、專案結構：

|-- build                            // 專案構建(webpack)相關程式碼
|   |-- build.js // 生產環境構建程式碼 | |-- check-version.js // 檢查node、npm等版本 | |-- utils.js // 構建工具相關 | |-- vue-loader.conf.js // webpack loader配置 | |-- webpack.base.conf.js // webpack基礎配置 | |-- 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所有元件 | |-- router // vue的路由管理 | |-- App.vue // 頁面入口檔案 | |-- main.js // 程式入口檔案，載入各種公共元件 |-- static // 靜態檔案，比如一些圖片，json資料等 |-- test // 測試檔案 | |-- e2e // e2e 測試 | |-- unit // 單元測試 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義程式碼格式 |-- .eslintignore // eslint檢測程式碼忽略的檔案（夾） |-- .eslintrc.js // 定義eslint的plugins,extends,rules |-- .gitignore // git上傳需要忽略的檔案格式 |-- .postcsssrc // postcss配置檔案 |-- README.md // 專案說明，markdown文件 |-- index.html // 訪問的頁面 |-- package.json // 專案基本資訊,包依賴資訊等
 

7、學習資料：

https://cn.vuejs.org/v2/guide/instance.html
https://blog.csdn.net/xiaoyangerbani/article/details/80735310
https://note.youdao.com/share/?id=b8e1247e079b8ccd0d2644b28c00f72b&type=note#/