vue2.5/vue-cli3.0版本更新引起的一些常見問題

網上不少教程文章都是基於vue2.0搭建的，vue-cli也是低版本的
在跟着教程練習時，就會產生不少疑惑：
困擾我好久，問了不少人，居然沒人說對，
雖然隱約以爲應該是版本的問題，仍是不知如何下手，查閱了許多資料..

若是有人告訴我vue/cli只看這個就夠了，在查資料查到吐血後，我信了！

vue-cli官方文檔

安裝命令調整

原：npm install -g vue-cli
vue init <template-name> <project-name>
改成：

npm install -g @vue/cli
# or
yarn global add @vue/cli

vue create my-project

vue-cli官方倉庫
命名方式已經改成npm推薦的新的包名規則，使用做用域

項目初始化的不一樣

通常人都會告訴你選默認，而後就掉坑裏了...(固然選了也掉）
發現手動初始的時候能夠定義的東西挺多的..是選擇manual纔會有
參考上面那篇vue-cli3.0初體驗..
好比less/sass均可以在這裏配置...
好比我選了less在本地node_modules，就會多less的包
大概就是已經npm install less-loader style-loader less

手動初始化加入vuex,vue-router以後,
public至關於原來的static，裏面的index.html是項目的入口
src同之前

eslint這個怎麼選呢

項目結構變化

選擇default初始化，能夠看到項目結構爲:

│  package-lock.json
│  package.json
├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.js
    ├─assets
    │      logo.png
    └─components
            HelloWorld.vue

build哪裏去了？config哪裏去了？配置都消失了？

vue-cli3.0默認項目目錄與2.0的相比，更精簡:
1.移除的配置文件根目錄下的，build和config等目錄，
2.移除了static文件夾，新增了public文件夾，而且index.html移動到public中。
3.在src文件夾中新增了views文件夾，用於分類 試圖組件 和 公共組件 。
4.大部分配置 都集成到 vue.config.js這裏,在項目根目錄下

在vue.config.js裏大概配置
經常使用的路徑名、根目錄、預處理、devServer配置、pwa、dll、第三方插件
vue.config.js

這裏不負責任的扔一篇本身寫的很口水的static assets靜態資源相關

Q:webpack.config.js 去哪了?

webpack相關配置

那麼具體在項目中如何修改呢，
這裏我也還沒搞的很是清楚，待研究...
不知道是否是能直接在這裏設置
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
一個使用的例子
以前是分webpack.base.config.js/ dev / prod
如今去哪了呢
https://doc.webpack-china.org...

webpack-dev-server 的配置如今在 webpack.config.js/devServer 下
devserver

關於3.0更新的官方issue
尤大的解釋是這樣的..

1. vue-cli@3.0修改的方向是逐步成爲「config/script in a package」的模型
2.爲避免使用戶預先作一些不可逆的設置，
-咱們將逐步一出browserify支持，webpack講只基於一個template
-在預設時就能夠配置常見的（pwa/ts/ssr）設置
3.除了封裝包，提供經過 vue.config.js配置的可能
-爲高級功能 如 env variables, css extraction API proxying提供了一個集中的入口
-如本地預設同樣，提供了底層的webpack設置支持，多是webpackchain

可能的方向???（顯然並不明確）
他這裏貌似是提的設想，到底實現了多少呢?好像也沒說的很明白..
去哪看他實現了多少呢???..

Q:npm run dev改了？

在根目錄的package.json裏有以下命令

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"

因此之前那些用npm run dev的，約莫是隻能npm run serve/npm run build了
而後就如上圖egoist設想接近了
固然自己是「打包了一個express之類的serve工具啥的.????」
具體是package.json裏面「scripts」有寫..鍵值..
我在哪看的，想不起來了...有空改吧..
我最近用的是npm run serve
不知道vue-scripts dev行不行 參考上面一段
vue-cli-service官方文檔

vue-cli-service serve starts a dev server based on webpack-dev-server. It comes with hot-module-replacement (HMR) out of the box.

Q:使用vue-cli初始化後，到底還要不要裝vuex,vue-router?

當咱們初始項目的時候，若是使用 默認配置 ,本地node_modules應該是這樣的，因此，
沒有vuex,vue-router阿！ 可是估計是有vue-loader，也有webpack..
和舊版本不同的，2.0的版本好像都會裝（看教程裏揣測的），反正根目錄下有vuex/vue-router文件夾..

可是初始項目的時候，若是是 手動安裝 的話，選了，就會有！參考問題1.
此次咱們手動選擇初始化...

項目結構就發生了一些變化...多了views??
多了router.js(vue-router) / store.js(vuex)

Q:原來寫在src/router/index.js 如今放哪呢

教程裏通常都是

那如今咱們放哪呢?
ok，通過自定義帶router的初始化，咱們能夠 放在router.js裏~

所有的組件都是註冊到app.vue麼? 仍是都引入在main.js
這裏是真的不太懂，主要是不懂vue開發者項目結構的思路..其實只要引入import export了能用就行..
可是爲了追求完美..待研究...
（對了這裏的@components是webpack alias??配置，忘了在哪看的了webpack alias）
腦袋痛，關於webpack4.0大約也要寫一篇文章..

Q:render/mount/app的一些問題

new Vue({
  render: h => h(App)
}).$mount('#app')

這一段我一開始沒看懂，如今略略有點懂了..
詳細參見render h=>h(app)都是些啥
基本上就是..

new Vue({
  el: '#app',
  render: function(h) {
    return h(app)
  }
})

css相關

https://github.com/vuejs/vue-...

Q: webpack4.0的一些問題..

待更新..
我搜到的參考文章:
https://www.imooc.com/article...
https://juejin.im/post/5ac9dc...

有空再更新了

扔一點學習資料：
Vue 脫坑記 - 查漏補缺(彙總下羣裏高頻詢問的xxx及給出不靠譜的解決方案
話說我以爲這個真的能夠寫成官方q&a特別3.0一出
若是有的話麻煩甩下鏈接謝謝..
不過如今不少都寫在報錯提示上了，仍是很讚的..

本文參考：
vue-cli3.0初體驗..
vue-cli3.0特性
vue3.0入門
Vue CLI 3.x 簡單體驗

其餘可供參考
經常使用配置修改