vue第13天：使用Vue脚手架搭建项目、项目介绍、产品开发流程、创建项目、使用Git管理项目、创建login组件-配置路由、项目基础：公共样式处理、在线图标库、rem插件配置、目录别名的配置

vue 脚手架

使用脚手架搭建项目

1. 全局安装

   yarn global add @vue/cli       如果装不上 => 用 npm i @vue/cli -g
   
   vue -V  查看版本
   

   创建项目

   vue create 项目名
   
   先cd到项目目录, 再启动:
   yarn serve   /   npm run serve
   

此 Linter 可以不选，不然到后面会显示语法报错

若真选了这个，解决方案：src - main.js 的首行写上下面这行注释就可以了

/* eslint-disable */

脚手架中配置webpack

新建 vue.config.js 自动启动浏览器, 配置了端口号

vue.config.js 中配置的内容, 会覆盖默认 vue-cli 的webpack配置

module.exports = {
   
  devServer: {
   
    open: true,
    port: 3000
  }
}

vue-cli - 基本结构分析

基本目录结构分析

基于 vue-cli - 代码规范校验的说明

如果公司没有明确规定规范, 那么脚手架初始化创建项目时, 就可以不勾上 lint

删除目录文件, src 中删除只剩 App.vue 和 main.js

eslint: 进行代码格式的校验, 如果代码不符合规范, 直接报错
1. 不能有多余的换行, 最多一行
2. 不能有声明, 但是不使用的变量
3. 导入, 必须放在顶部
4. 分号规范, 定义好了必须遵守 (无分号)
...

eslint 配置

安装vscode的prettier插件

• 配置 => 搜索 format 将 formatOnSave 勾上

// 当保存的时候使用prettier进行格式化
"editor.formatOnSave": true,

• 在项目的根目录创建prettier的配置文件 .prettierrc

{
   
  "semi": false