vue-cli4构建项目,与vue-cli3构建项目的区别
vue-cli中文文档:https://cli.vuejs.org/zh/guide/#%E8%AF%A5%E7%B3%BB%E7%BB%9F%E7%9A%84%E7%BB%84%E4%BB%B6
今天把vue-cli3的项目升级到了vue-cli4,想着用vue-cli4构建的项目有什么区别,于是就想用vue-cli4构建个新项目看看:
在桌面新建一个文件夹,用vscode打开这个文件夹,在cos窗口输入:
vue create new_app
让选择一项预配置:
hhh:选择预设配置为router、vuex、babel、eslint
default:babel、eslint
Manually select features:手动选择配置,这里选择手动选择,其实hhh的预设配置就行,大多项目离不开那几个预设配置
选择了这几项,就比hhh配置多了个css预处理程序
注意,上下方向键时控制上下移动的,空格键是选择对应项的
然后回车,继续执行
是否使用路由的history模式,看个人及项目,最好一开始就选择history模式,以后不用再更改,不过更改也不麻烦,就直接选择了history模式
选择一个要用的预处理语言,之前一直使用less,后来发现scss是element-admin框架的依赖css预处理语言,就选择sass吧,选择node-sass
选择哪个ESLint自动化代码格式化检测,分别为,只预防、airbnb配置、标注配置、最高配置,这里选择左后一种最高配置
选择代码检测的时机,这里选择在保存代码时检测
更新换将单独配置的文件放到pakage.json还是放在单独的文件,这里选择单独的文件即可,清晰
是否把以上设置过的预设配置保存起来,这里不需要,每次创建项目重新选择一遍不麻烦,很快就选择好了,输入n
拍回车,就开始创建项目了,耐心等待,安装依赖
然后跳转到先创建的new_app文件夹下,运行npm run serve即可
就可以在浏览器上访问到项目了
对比一下与之前vue-cli3创建的项目的区别,在文件目录结构上,主要是router和store两个文件有点区别:
vue-cli4的:这种更适合拓展模块,之前用的vuex在一个store.js文件中,代码过多,显的臃肿,这种文件结构更容易后面的模块拓展
vue-cli3的:
两者创建成功项目后同样没有vue.config.js文件,需要手动添加
这和以前相比,表面上看变化不大,但是依赖肯定是最新的
。
相关文章
- Vue_(基础)Vue中的事件
- vue状态管理模式之vuex
- vue执行命令时报错问题
- Vue element-ui 限制时间范围选择
- vue项目中抽离.vue文件中的js代码
- [Vue] Get up and running with vue-router
- vue watch的this 到底是什么?
- thinkphp6: 使用前后端分离的验证码(thinkphp 6.0.9/php 8.0.14/vue 3.2.26)
- vue 实现动态路由
- vue.js3: 用crypto-js做sha加密(vue@3.2.37 / crypto-js@4.1.1)
- vue elementUI表单输入完成后回车触发事件@keyup.enter.native
- vue项目怎么进行seo的优化白屏太久怎么处理?
- Electron使用指南 - [10] 构建 Vue 项目基本结构
- Kbone基础 - [05] Kbone + Vue 项目手工搭建流程
- vue项目报错Unknown custom element: <router-view> - did you register the component correctly?
- vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
- ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
- 将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩
- vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
- vue返回上一页面如果没有上一页面返回首页
- vue中如何引入全局样式或方法
- Mac中如何搭建Vue项目并利用VSCode开发
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- 解析Vue项目每一个文件夹及文件的作用
- 【项目实战】Vue.js入门介绍
- vue-element-admin整合.net core web api项目开发点滴记录