Vue CLI 3搭建vue+vuex最全分析(推荐)

2020-06-13 10:23:09易采站长站整理

...mapActions([
'incrementStep'
]),
},
components: {
HelloWorld
}
}
</script>

② router (路由):

vue cli 2 :“ router/index.js ”

vue cli 3:“router.js”(用法和做的事都一样)

③ 去掉 static  、 新增 public 文件夹

vue cli 2 :static 是 webpack 默认存放静态资源的文件夹,打包时会直接复制一份到dist文件夹不会经过 webpack 编译 

vue cli 3  :摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式:

经webpack 处理:在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

不经webpack 处理:放置在 

public
 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份,不做任何编译压缩处理

④ index.html :

vue cli 2 :“index.html ” 

vue cli 3 :“public/index.html ”此模板会被 html-webpack-plugin 处理的

⑤ src/views:

vue cli 3 的 src文件夹 新增 views文件夹 用来存放 “页面”,区分 components(组件)

⑥ 去掉 build(根据config中的配置来定义规则)、config(配置不同环境的参数)文件夹 :

 vue cli 3 中 ,这些配置 你可以通过 命令行参数、或 

vue.config.js
 (在根目录 新建一个 vue.config.js 同名文件)里的 devServer 字段配置开发服务器 

⑦ babel.config.js:

配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 

babel.config.js
。和 
.babelrc
 或 
package.json
 中的 
babel
 字段不同,这个配置文件不会使用基于文件位置的方案,而是会一致地运用到项目根目录以下的所有文件,包括 
node_modules
 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 
babel.config.js
 取代其它格式。

⑧ 根目录的一些其他文件的改变:

之前所有的配置文件都在vue create 搭建时preset预设 或者 后期可以通过 命令参数 、 

vue.config.js 中配置

根据需要在根目录下新建 vue.config.js自行配置,eg:(简单配置,更多配置详情参见官网:https://cli.vuejs.org/zh/config/)


module.exports = {
baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)