Vue-cli 安裝使用和理解

Vue 的 官方文檔 提到

點開這個連接，跟着文檔一步步直到：

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

若是按照文檔的建議，提早了解了 npm 的語法，這裏應該沒什麼要解釋的，my-project 是本身的項目文件夾名稱，我操做的時候，根據終端的提示，自動運行了

npm install

結果出現了一些報錯，而後根據狀況改錯，可是最終

npm run dev

仍是報錯了，

參考了網上建議，把 node_modules 文件夾刪了，從新

npm install

而後，再

npm run dev

如今，就能夠了，

猜想成功的緣由是：

自動 npm install 出現的錯誤，雖然改掉了，可是相關的配置可能已經被影響到了，因此卸了重裝，至關於改錯以後從新裝，就不會再被錯誤影響了；

而後個人項目目錄就成這樣了：

循着前面的文檔：

找到了，For this template，看到了

根據提示，就先看了 vue-loader's documentation，進到了這裏：

在這裏，按照提示跑了一遍，項目目錄就是這個樣子：

當我把 vue-loader 和 vue-cli 文檔都看完以後，再回來看 vue-cli 生成的項目目錄，也就是：

大概明白了什麼意思，也大概知道這些東西用來幹嗎用的，可是看主要代碼的時候，

並不知道這個 router-view 是用來幹嗎的，也找不到定義，回頭看 @vue/cli 生成的項目文件，

在旁邊是能找到 HelloWorld 的定義的，是一個組件而已，這下和之前的 script 引入 vue.js 相比，難度不是很大，能看懂；

後來瞭解到，那個看不懂的 <router-view /> 是 vue-router ，初始化的時候選擇否就好了，就是下面這樣：

固然，我還把測試的東西也選 No 了，畢竟暫時用不到，安裝好了，來看下目錄：

雖然目錄看起來又跟裝了 vue-router 的項目目錄同樣多，可是打開 App.vue，

會發現，跟 @vue/cli 生成的項目文件相似的，看得懂，因此我就從這裏開始經過 vue-cli 學習 vue 的單文件組件；

至於 v-router，我打算和 vuex 做爲 vue 全家桶一塊兒學，剛開始，暫時以爲不必學；

另外，若是感受這個案例和之前的 script 引入 vue.js 對不上號，理解不了的話，能夠戳  vuejs 單文件組件.vue 文件

參考文檔：

Vue項目碰到"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序或批處理文件"報錯

Vue-cli是何物

vuejs 單文件組件.vue 文件