vue-cli快速構建vue項目模板

vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。

 一、使用npm安裝vue-cli

   須要先裝好vue 和 webpack（前提是已經安裝了nodejs，不然連npm都用不了）

　　npm install -g vue //全局安裝vue 　　npm install -g webpack //全局安裝webpack 　　npm install -g vue-cli //全局安裝vue-cli

　　注意：上面這些裝過一次以後都不須要再安裝了
　　好比說個人項目要生成在E盤下面
　　那麼先進到目錄裏   命令： E：

二、使用vue-cli構建vue項目

vue init webpack vueProject //生成項目名爲vueProject的模板
　　　　命令輸入後，會進入安裝階段，須要用戶輸入一些信息
　　　　Project name (vuetest) //項目名稱，能夠本身指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters）；
　　　　Project description (vue project) //項目描述，也可直接點擊回車，使用默認名字；
　　　　Author (wei)       //做者；
　　　　Install vue-router? (Y/n) //是否安裝vue-router，這是官方的路由。這裏就輸入「y」後回車便可；
　　　　Use ESLint to lint your code? (Y/n) //是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響總體的運行，這也是爲了多人協做。用則選Y,我先選擇n；
　　　　Setup unit tests with Karma + Mocha? (Y/n) //是否安裝單元測試,我選擇n ；
　　　　Setup e2e tests with Nightwatch(Y/n)? //是否安裝e2e測試，我選擇n ；
　　　　一系列問題，看本身需求自行輸入； cd vueProject　　　　　　　　//進入到項目文件夾 npm install //初始化安裝依賴
如圖

　是由於 fsevent是mac osx系統的，在win或者Linux下使用了 因此會有警告，忽略便可；

這樣子項目就安裝完了,生成文件如圖：

三、運行結果

　　而後執行命令 npm run dev

　　如圖：

　　

　　在瀏覽器打開http://localhost:8081，則能夠看到歡迎頁了，以下圖：

　　

　　

四、通常項目目錄的簡要說明（與本案例不符，僅爲參考）

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

├── build   // 項目構建(webpack)相關代碼   │ ├── build.js   // 生產環境構建代碼   │ ├── check-versions.js   // 檢查node&npm等版本   │ ├── dev-client.js   // 熱重載相關   │ ├── dev-server.js   // 構建本地服務器   │ ├── utils.js   // 構建配置公用工具   │ ├── vue-loader.conf.js   // vue加載器   │ ├── webpack.base.conf.js   // webpack基礎配置   │ ├── webpack.dev.conf.js   // webpack開發環境配置   │ └── webpack.prod.conf.js   // webpack生產環境配置   ├── config   // 項目開發環境配置   │ ├── dev.env.js   // 開發環境變量   │ ├── index.js   // 項目一些配置變量   │ └── prod.env.js   // 生產環境變量   ├──node_modules   // 項目依賴的模塊   ├── src   // 源碼目錄   │ │ ├── assets   // 資源目錄   │ │ └── logo.png       │ ├── components   // vue公共組件   │ │ └── Hello.vue       │ ├──router   // 前端路由   │ │ └── index.js   // 路由配置文件   │ ├── App.vue   // 頁面入口文件   │ └── main.js   // 程序入口文件   └── static   // 靜態文件，好比一些圖片，json數據等   │ ├── .gitkeep       ├── .babelrc   // ES6語法編譯配置   ├── .editorconfig   // 定義代碼格式   ├── .gitignore   // git上傳須要忽略的文件格式   ├── index.html   // 入口頁面   ├── package.json   // 項目基本信息   ├── README.md   // 項目說明

以上目錄選擇了獨立構建模式，安裝vue-router，但沒有安裝ESLint、單元測試、e2e測試。

主要介紹利用vue-cli腳手架、一些命令來生成簡單的項目模板。