vue-cli4.xx从0到1搭建项目

目前vue-cli已经更新到了4.5.4版本(2020/8/27),先更新下版本cnpm i -g @vue/cli

安装好cli后 新建项目 vue create <项目名>

出现preset配置,根据需要进行选择

选择Babel,router,vuex,css预编译,校验代码可选

项目创建好后,配置一些常用配置:

1.webpack配置

module.exports = { ... }

需要注意的是:

cli4已经没有 webpack.config.js 和 config文件夹了,配置需要在根目录下创建vue.config.js,它是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写

2.webpack常用配置

①.配置不同的开发环境:

开发环境

②自动为css添加浏览器前缀


image.png

③px2rem,px自动转换rem
(这里需要配合lib-flexible使用,lib-flexible设置html的font-size)

image.png

注意②③这两个关于css的配置要在module.exports = { ... }里注册

image.png

3.最后封装个axios

至少有个封装的axios才好称为搭项目
主要封装两个功能
baseUrl
请求拦截设置token

总结:以上这些是项目搭建过程中 最基本的配置,第三方插件的配置得参考插件说明,以后遇到好用的配置再回来补充
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容