安裝命令調整

原：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

專案初始化的不同

一般人都會告訴你選預設，然後就掉坑裡了...(當然選了也掉）
發現手動初始的時候可以定義的東西挺多的..是選擇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

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

1.[email protected]修改的方向是逐步成為“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相關

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

有空再更新了

扔一點學習資料：
Vue 脫坑記 - 查漏補缺(彙總下群裡高頻詢問的xxx及給出不靠譜的解決方案
話說我覺得這個真的可以寫成官方q&a特別3.0一出
如果有的話麻煩甩下連線謝謝..
不過現在很多都寫在報錯提示上了，還是很讚的..