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 简单体验

其余可供参考
经常使用配置修改