31Vue-项目搭建与配置（1）

南工大第一帅哥
191 阅读9分钟

项目搭建规范

搭建项目流程

1.vue create 项目名

2.选择手动创建（Manually）

3.选择需要的配置

Babel                   
TypeScript              
PWA Support        ---一般不选   
Router
Vuex
CSS                ---CSS预处理器，处理Sass
Linter/Formatter   ---Linter代码规范检查
Unit Testing       ---单元测试
E2E Test           ---端到端测试

4.选择vue3 版本

5.是否持用class风格的component：N（一般不使用）

6.是否使用Babel处理TypeScript：Y（使用Babel，tsc用的少）

7.选择CSS预处理器（之前没选CSS的不会出现这个）:Less

8.选择Linter的配置：ESLint+Prettier 自行选择

9.选择在每次保存的时候进行Lint规范：Lint on save

10.生成的配置文件放在哪里：我们选择放在dedicated config独立的配置文件

11.是否保存成一个预设preset：N（以后就不用这么麻烦了，直接选择预设自动创建）

代码规范

1.集成editorconfig配置

editorconfig：是一个配置文件，需要自己手动在目录中创建。

有助于为不同 IDE 编辑器上处理同一项目的多个开发人员 维护一致的编码风格。

举例：

张三使用Tab的时候，缩进的是2个空格，李四使用Tab的时候，缩进的是真正的Tab缩进，不是空格。大多数情况 下，我们都是用空格来缩进的。

不同的人有不同的代码风格，但是最终会git存储在仓库中，如果每个页面都有不同的风格，后期给看代码的时候会造成不可避免的麻烦。

.editorconfig配置

vscode:首先要安装插件：EditorConfig for VS Code (一个老鼠戴着眼镜的头像)

vscode：默认情况下会先读取这个文件，根据文件中书写的要求，编辑器会按照要求进行编辑代码风格。

/.editorconfig 文件的配置

# http://editorconfig.org

root = true                          # 表示当前这个配置，是在根目录中的
 
[*]                                  # 表示所有文件适用
charset = utf-8                      # 设置文件字符集为 utf-8
indent_style = space                 # 缩进风格（tab | space）
indent_size = 2                      # 缩进大小
end_of_line = lf                     # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true      # 去除行首的任意空白字符
insert_final_newline = true          # 始终在文件末尾插入一个新行

[*.md]                               # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

2.使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

比如多了一些空格、多了很多换行，如果手动就会很麻烦，但是通过prettier后，ctrl+s 保存，就会立马格式化。

安装使用

安装插件：Prettier-Code formatter但是这种情况是只用vscode编辑器中来格式化

-D：开发时依赖，项目打包的时候跟这个prettier包没关系，不会用到它

安装：npm install prettier -D让项目以来prettier包，可以在任意编辑器中，进行格式化。

prettier包安装后，在/node_modules/.bin/prettier就会多一个命令行工具，通过命令行来进行格式化。

配置格式化时的风格

对单/双引号、是否有分号、属性间逗号的分割，这些都要我来设定好，这样格式化工具才知道怎么做。

editor中是我们写代码的时候，到底是空格还是tab键。而prettier是在我们保存的时候，进行格式化（格式化指的是保存后）。就算写代码的时候写的是空格，我也能转换成tab键。

创建 .prettierrc 文件

* useTabs：使用tab缩进还是空格缩进，选择false；
* tabWidth：tab是空格的情况下，是几个空格，选择2个；
* printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
* singleQuote：使用单引号还是双引号，选择true，使用单引号；
* trailingComma：在多行输入的尾逗号是否添加，设置为 `none`；
* semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

有一些特定的文件，我不希望prettier对他格式化

.prettierignore

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

配置完上面的之后，用ctrl+s，都可以进行格式化，但是需要对每个页面进行ctrl+s保存才能格式化，会比较麻烦。

package.json 设置脚本

{
    "scripts:"{
        ...
        //利用prettier工具，对所有文件（除了忽略）进行格式化
        "prettier":"prettier --write ."
    }
}

npm run prettier就会执行package.json中的prettier脚本

prettier与eslint

在前面创建项目的时候，我们就选择了ESLint和prettier，所以Vue会默认帮助我们配置需要的ESLint环境。（其实不需要我们自己在前面的安装prettier）

安装eslint插件ESLint

但是自己书写的格式化风格（prettier） 会和 eslint 存在冲突

解决：安装两个库(-D开发时依赖)，让eslint和prettier兼容起来，但是前期我们创建项目已经选择过eslint+prettier,其实已经帮我们装过了，我们知道就好

npm i eslint-plugin-prettier eslint-config-prettier -D

但是为啥安装过了，页面还是会有冲突的提示？

还需要我们在.eslintrc.js中再配置一下

module.exports = {
    ...
    extends:[
    //截止2022-4-12，vue已经会自动配置这个了
       'plugin:prettier/recommended' 
    ],
}

也就是说：截止到2022-4-12，我们配置完.prettierrc后 以及 .getignore，就可以了，不用再配置兼容了，vue3目前已经帮我们兼容好了。前提：vue create的时候选择了prettier+eslint

此时，我们就可以 优先满足我们 prettier中的规范，其次满足 eslint 的规范

3.vue.config.js配置

如果我对vue的某些配置不满的时候，可以自己来手动修改。但是考虑到大家对Vue CLI中webpack的配置的不了解，所以vue为我们提供了vue.config.js来方便我们修改。到时候运行的时候，就会合并到vue中。

https://cli.vuejs.org/config/#vue-config-js

vue.config.js文件

因为此文件是在node环境下的，所以导出方式不是export，而是如下这种(Commonjs)
module.exports = {
    outputDir: "./build", //打包后的文件夹名，默认是/dist
    configureWebpack: { //配置格式是对象，最后通过webpackmerge合并

    resolve: { //resolve：配置路径
      alias: { //alias：取别名
        components: '@/component'
            //@：默认webpack中配置别名：@ = src
            //这里表示'src/components'的别名是components
            //以前我import的时候是./components;现在@/components或components
      }
    }  
  }
  
}

outputDir:CLI提供的属性

configureWebpack:和webpack属性完全一致，最后会进行合并

configureWebpack

configureWebpack: {
    resolve: {
      alias: {
        components: '@/component'
      }
    }
  }

除了上面的对象写法，它还可以写成一个函数

但是这里会全部将以前的覆盖掉，也就是以前我默认配置的@=src，是没有的，需要重写

1.重写需要依赖path模块
const path = require('path')

configureWebpack:(config) => {
    config.resolve.alias = {
        '@':path.resolve(__dirname,'src'),
        components:'@/components'
    }
}

第三种配置方式：链式方式

chainWebpack:(config) => {
//一条一条链子，链在一块儿
    config.resolve.alias.set('@',path.resolve(__dirname,'src'))
    .set('components','@/components')
}

关闭eslint提示

图片.png

我能够确定我写的是对的，不需要eslint提示错误。鼠标放在错误信息，将他复制，然后在文件中配置即可。

.eslintrc.js

reules:{
    '...':off
}

直接将eslint关闭：

vue.config.js

module.exports = {
    lintOnSave:false  //关闭eslint检查
}

git和eslint的结合使用

当我们后期提交代码的时候，如果将一个检查过的代码提交是无所谓的；但是如果提交的代码不规范，会造成很多问题。我们希望当我们git提交的时候，eslint能帮我们提示、并改进错误。

图片.png

powershell是和cmd一样的终端、是微软想要替代cmd终端的一个替代品。powershell中有些命令会执行失败。如果出现问题，我们需要在cmd终端中进行执行。

建议将powershell终端修改为cmd终端。

这里我们推荐Git BASH命令行工具，需要下载Git.

git Husky和eslint

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit(预提交、也就是提交之前检查)、commit-msg(提交信息的检查)、pre-push(push到服务期之前进行拦截检查)

1.下载好Git后，对git进行username和useremail的配置

2.在vscode中，进行安装Husky

1.git init
2.npm i husky -s -d

3.npx husky install 之后执行以下husky的命令进行初始化，初始化之后会发现在项目的根目录下面会出现【.husky】文件夹

4.执行添加husky脚本的命令 npx husky add .husky/pre-commit "npm run lint"

5.最后提交代码:git add .和git commit -m "提交后名"

图片.png

大家可以发现，提交代码的时候，husky会按照eslint中的规范，对提交的代码进行一次格式化。

git补充

git commit -m "名字"，如果有的组员乱写名字的话，也会造成不规范。通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

Commitizen 是一个帮助我们编写规范 commit message 的工具；

1.安装npm install commitizen -D

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog： 这个命令会帮助我们安装cz-conventional-changelog：

图片.png

3.这个时候我们提交代码就可以使用：npx cz

第一步是选择type，本次更新的类型 图片.png

第二步选择本次修改的范围（作用域）

第三步选择提交的信息

第四步提交详细的描述信息

第五步是否是一次重大的更改

第六步是否影响某个open issue

手动引用路由

前期选择router的话，就不需要这一步

1.安装最新版本路由 npm install vue-router@next

2.新建文件夹，里面存储路由组件 views/login views/main

<template>
    <div>main</div>
</template>

<script lang = "ts">
    import {defineComponent} from 'vue'
    export default defineComponent({
        setup(){
            
            return{
            
            }
        }
    })
</script>

lnag=ts:表示可以用ts代码

defineComponent:让组件能够更好的支持ts，定义一个组件

3.建立路由文件router/index.ts

import {createRouter,createWebHashHistory} from 'vue-router'

import {RouteRecodrRaw} from 'vue-router'

//routes里存储path，需要一个类型限制，需要导入
const routes： RouteRecodrRaw[] = [
    {
    //默认url中只有 / ，即重定向的是login页面，
        path:'/',
        redirect:'/login'
    },
    {
    //懒加载，当我url后缀是login，加载login组件
        path:'/login',
        component:()=>import('@/views/login/login.vue')
    },
    {
        path:'/main',
        component:()=>import('@/views/main/main.vue')
    },
]

const router = createRouter({
    routes:,
    history:createWebHashHistory()
})

export default router

routes数组的类型限制为：RouteRecodrRaw[]，表示里面存储的都是RouteRecord类型的数组数据。

4.main.ts配置

import router from './router'
const app = createApp(App)
app.use(router)
app.mount(#app)

5.App.vue使用

<template>
    <router-link to="/login">登录</router-link>
    <router-link to="/main">首页</router-link>
    //占位
    <router-view></router-view>
</template>

<script lang = "ts">
    import {defineComponent} from 'vue'
    export default defineComponent({
        setup(){
            
            return{
            
            }
        }
    })
</script>

手动引入vuex

安装：npm install vuex@next

1.创建store文件夹，/store/index.ts

import {createStore} from 'vuex'

const store = createStore({
    state:()=>{
        return{
            name:"coderwhy"
        }
    }
})

export default store

2.main.ts注册

import store from './store'

app.use(store)
app.mount('#app')

3.App.vue使用

<h2>{{$store.state.name}}</h2>
avatar
文章
阅读
粉丝