介绍
Vue使用脚手架搭建项目的具体流程
# 创建Vue脚手架
- 注意你需要全局安装Vue脚手架 (opens new window)
npm install -g @vue/cli
- 目录只能用英文
vue create 项目名称(英文)
# 选择Manually select features
# 选择相关选项
Babel:es6 转 es5
/** * @type {formName} String * @type {obj} any * @example 表单数据(消除表单验证提示) this.$resetForm('绑定form表单的ref', this.你要重置的数据域) * @example 普通数据 this.$resetForm('', this.你要重置的数据域) */// formName: 表单的ref属性 obj表单的数据域export default function resetForm (formName, obj) { // 清空表单 if (this.$refs[formName]) { this.$refs[formName].resetFields() } // 清空数据域 Object.keys(obj).forEach(key => { obj[key] = '' })}// main.js 入口文件注册// 清空表单import resetForm from '@/utils/resrtForm'Vue.prototype.$resetForm = resetFormjs
CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
Linter / Formatter:代码格式校验,ESLint 代码格式校验。后面会再次让你具体选择eslint的标准。
# 选择版本号
# 选择路由模式
- y 表示采用history模式
- n 表示采用hash模式
# 选中css预处理
- 我喜欢用scss
# 选择代码校验规范
# 选择代码触发条件
这里建议两个都选上,更严谨。
Lint on save:在保存文件时会检查eslint错误。
Lint and fix on commit:每当执行
git commit
提交的时候,会自动修正eslint错误。
# 选择代码校验配置文件形式
Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:
In dedicated config files:分别保存到单独的配置文件
In package.json:保存到 package.json 文件中
# 选择是否保存默认配置
这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。
# 配置选项总览
# 回车后,进入安装依赖包的过程
向导配置结束,开始装包。安装包的时间可能较长,请耐心等待......
# 安装完成后出现如下效果
# 运行项目
# 进入你的项目目录
cd mytest
# 启动开发服务
npm run serve