#### 全局安裝vue-cli ``` cnpm install –g vue-cli ``` #### 創建項目 ``` vue init webpack 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測試。 ``` #### 項目目錄 ``` bulid?? 里面是一些操作文件，使用npm run \*????時其實執行的就是這里的文件。 config 配置文件，執行文件需要的配置信息。 src?? 資源文件，所有的組件以及所用的圖片都是在這個文件夾下放著。簡單看一下這個文件夾下都放了哪些東西。 assets? 資源文件夾，放圖片之類的資源， components? 組件文件夾，寫的所有組件都放在這個文件夾下， router? 路由文件夾，這個決定了頁面的跳轉規則， App.vue 應用組件，所有自己寫的組件，都是在這個組件之上運行了。 main.js? ? webpack入口文件。 ``` #### 安裝依賴 ``` cd mydemo cnpm install 它根據package.json的配置表進行安裝，安裝完后會在mydemo下多一個文件夾node\_modules，這里的文件對應著package.json里的配置信息。 ``` #### 運行項目 ``` npm run dev ``` #### 無法初始化項目 ``` downloading template.... ``` ``` 1. 去github上下載要初始化的模板 [https://github.com/vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) 2. 將文件夾放到c:administrator/.vue-templates文件夾下面 3. vue init webpack project-name --offline ```