介绍
基于 Vue.js 进行快速开发的完整系统。
作用 快速搭建项目结构
安装
两种安装方式:
-
$ npm install -g @vue/cli
-
$ yarn global add @vue/cli
安装完毕后,可以在 cmd 命令行中输入检测安装成功没有: -
$ vue --version
如果能够查看到版本信息,则说明安装成功,否则安装失败或环境变量配置有问题。
创建项目
GUI - 图形化用户界面
- $ vue ui
命令行
1.执行创建命令:
- $ vue create project-name
显示创建项目的向导
2.选择手动选择项目新特性项:
选择新特性:
4.选择 vue 版本:
5.选择 CSS 预处理器:
6.选择 linter 规范:
7.选择保存时验证并格式化:
8.选择配置文件存放位置:
9.是否将上述选择特性保存为预设项:
10.安装项目依赖
11.项目创建成功后,进入项目目录,运行任务:
项目说明
public
目录中放置的是应用的 html 文件(通常只有一个 index.html)src
目录中放置我们自己项目中所书写的源代码src
下 main.js 是应用的入口 JS 文件.eslintrc.js
是 ESLint 的配置文件babel.config.js
是 Babel 的配置文件package.json
是项目配置文件vue.config.js
是 Vue CLI 的配置文件(在 VueCLI4.x 中这个文件需要自己手动创建)
配置文件 npm scripts
serve:
开发任务,会自动启动开发服务器(webpack-dev-server)build:
生产任务,构建生产环境下的资源lint:
验证并格式化代码
自动格式化代码
1.打开 Visual Studio Code ,点击设置选项里面的设置选项。
2.点击图标
3.点击后在点击的文件中加入如下指令:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
4.完成后当有格式问题报错的时候,可以按住 ctrl
+ s
来进行自动格式化。
自定义代码格式
1.点击项目文件中的如下文件
2.文件的这个位置可以自定义规则
安装 VSCode 插件
ESLint
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
Vetur
Vetur 用于警告未正确设置项目。
关闭 eslint 代码检测工具
在 vue.config.js 文件中加入以下代码即可关掉代码检测工具
module.exports = ({
lintOnSave: false
})