一、安装Vue和查看Vue版本
1.1安装Vue
npm i -g @vue/cli
1.2 查看Vue
Vue -V
二、新建一个Vue项目
2.1 使用命令创建项目
vue create vue-project # vue-project是项目名称
Default 表示使用默认配置,默认勾选babel、eslint ,回车之后直接进入装包
Manually 自定义勾选特性配置,选择完毕后,才能进入装包
这边我们选择Manually select features,按ENter继续下一步
2.2 自定义选择要安装的插件。( 按空格是选择勾还是不勾,按回车是代表确认。)
babel: 把ES6语法可以转换成ES5语法的插件
Router:vue-router,路由,因为项目要用到路由跳转所以勾上
Vuex:我们项目也会用,但是还没学,所以先不勾,学的时候再来下载
CSS Pre-processors: css的预处理,可以选择less和sass,因为我们这个项目样式用less,所以悬赏
注意:按空格是选择勾还是不勾,按回车是代表确认
2.3 选择vue的版本 ,选择3.x项目
2.4 是否使用history模式的路由,输入y
区别如下:
2.5选择css预处理语言 ,勾选 Less
2.6选择代码格式校验使用哪种校验规范,选择第三种,回车
2.7选择什么情况下触发代码校验,按空格表示勾选,全选然后回车
Lint on save 当修改报错文件时触发
Lint and fix on commit 当执行git committ提交时
2.8 对应Babel, ESLint等配置文件是,这里选择独立的,勾选第一个
In dedicated config files 生成保存到独立的配置文件中
In package.json 把插件的配置信息和package.json文件写在一起
看个人喜欢,我喜欢写在package.json里
2.9 选择 你要不要保存当前的设置,方便下一次快速使用。如果你要保存输入y,不需要保存输入n。这里我选择n.
2.10 安装完毕!
2.11 进入目录,然后启动项目:
$ cd vue-project
$ pnpm run serve