Vue项目创建流程

一、安装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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

您懂我意思吧

你的鼓励,是我最大的支持!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值