vue3创建项目

创建项目前，需要先安装node、webpack、vue@next。安装完成后cd到你想要创建项目的文件夹下面

创建项目

vue create 项目名称

之后进行对应的选项（这里只给出需要选择的选项）

//对应选项
babel,ts,（router,vuex,--不选择，这里我们选择手动集成）css pre-processors,linter/formatter

3.x

N

Y

Less

Eslint + prettier

Lint on save

In dedicated config files

N

配置代码规范

1.在根目录下创建.editorconfig文件

针对同一个项目不同人来开发可能使用不同的软件，缩进不同，电脑不同等问题进行规范操作。我们使用的是vscode来编写，需要安装EditorConfig for VS Code插件。

# 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.代码格式化

npm install prettier -D

根目录下创建.prettierrc文件表示代码格式化内容--可以根据自己的喜好设置

{
  "useTabs": false,//是否使用tab缩进
  "tabWidth": 2,//tab是几个空格
  "printWidth": 80,//一行字符长度
  "singleQuote": true,//是否使用单引号
  "trailingComma": "none",//是否添加尾逗号
  "semi": false//句尾是否添加分号
}

创建.prettierignore文件表示忽略一些不需要代码格式化的文件

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

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

/public/*

vscode安装prettier-code formatter插件

测试prettier是否生效：package.json文件里script里配置”prettier”:”preitter --write .”

执行npm run prettier一次性将所有需要执行代码格式化的文件全部格式化

这样配置之后发现很多报红是因为和eslint有冲突，如何解决prettier和eslint的冲突，其实脚手架在创建的时候已经帮助我们配置好了，如果发现已经有问题，重新打开项目即可。

vscode安装eslint插件。

提交代码前进行校验，如果不符合eslint规范，那么自动通过规范进行修复

npx husky-init && npm install

然后将pre-commit里的npm test改成npm run lint

//提交代码
git add .
//进行代码规范--这里test是我们随便起的名字
git commit -m “test”

git commit规范

代码提交风格

//安装commitizen 
npm install commitizen -D
//安装并且初始化cz-conventional-changelog
npx commitizen init cz-conventional-changelog --save-dev --save-exact
//
git add .
//提交代码
npx cz
//查看提交
git log

npx cz之后有一些需要选择的内容： 选择本次更新的类型；选择本次修改的范围（作用域）；选择提交的信息；提交详细的描述信息；是否是一次重大的更改；是否影响某个open issue；

代码提交验证

//安装 @commitlint/config-conventional 和 @commitlint/cli
npm i @commitlint/config-conventional @commitlint/cli -D
//在根目录创建commitlint.config.js文件，配置信息
module.exports = {
  extends: ['@commitlint/config-conventional']
}
//使用husky生成commit-msg文件，验证提交信息
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

第三方库集成

vue.config.js :

要想本地打开需要加上下面代码 ，否则服务器能打开，本地打开会报错

publicPath: './'

vuex-router:

npm install vue-router@next

 src->router->index.tx,代码如下（里面放一些你想要展示的路由以及页面，这里只是做个展示）

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  {
    //首页展示的内容重映射到main路由
    path: '/',
    redirect: '/main'
  },
  {
    //你想要配置的路由以及对应的文件想要展示的内容
    path: '/main',
    component: () => import('../views/main/main.vue')
  },
  {
    path: '/login',
    component: () => import('../views/login/login.vue')
  }
]
const router = createRouter({
  routes,
  history: createWebHashHistory()
})
export default router

在main.ts中安装路由

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

在App.vue里 使用路由

<template>
  <div id="app">
    //路由跳转
    <router-link to="/login">login</router-link>
    <router-link to="/main">main</router-link>
    //路由占位
    <router-view></router-view>
  </div>
</template>

vuex

和vue-router很像，这里将所有代码放到一起

//安装
npm install vuex@next

//src->store->index.ts
import { createStore } from 'vuex'
const store = createStore({
  state() {
    return {
      name: 'yx'
    }
  }
})
export default store

//main.tx中安装
const app = createApp(App)
app.use(store)
app.mount('#app')

//App.vue中使用
<h2>{{ $store.state.name }}</h2>

 element-plus:

element-plus官方有关更多内容可以参考官方

npm install element-plus

全局引入：

//main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
//之后在你想要使用该组件的地方引入相应组件，这里我们在App.vue里引入el-button
<el-button>默认按钮</el-button>

 按需引入：

npm install -D unplugin-vue-components unplugin-auto-import

 vue.config.js配置下面代码

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

App.vue中引入想要使用的组件--我发现按需引入之后不需要导入组件，直接使用即可，非常方便

这里将所有代码贴出来，方面理解

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h2>{{ $store.state.name }}</h2>
    <router-link to="/login">登录</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
    <el-button>按钮</el-button>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
//import { ElButton } from 'element-plus'

// defineComponent作用：类型限制和类型推导
export default defineComponent({
  name: 'App',
  components: {
    //ElButton
  }
})
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

axios配置

 npm install axios

 axios请求->get/post请求

// get/post请求，并且传入参数
axios
  .get('http://httpbin.org/get', {
    params: {
      name: 'yx',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })

axios配置->全局配置以及每个请求单独配置 

//axios配置
// 全局配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 1000
axios
  .get('/get', {
    params: {
      name: 'yx',
      age: 18
    },
    // 每一个请求单独配置
    timeout: 100
  })
  .then((res) => {
    console.log(res.data)
  })

axios.all->多个请求一起返回

axios
  .all([
    axios.get('/get', { params: { name: 'yx', age: 18 } }),
    axios.post('/post', { params: { name: 'withKeys', age: 20 } })
  ])
  .then((res) => {
    console.log(res[0].data)
    console.log(res[1].data)
  })

 axios拦截器->请求拦截/响应拦截

// axios的拦截器->两个函数参数
// fn1: 请求发送成功会执行的函数
// fn2: 请求发送失败会执行的函数
axios.interceptors.request.use(
  (config) => {
    // 想做的一些操作
    console.log('请求成功')
    return config
  },
  (err) => {
    console.log('请求失败')
    return err
  }
)
// fn1: 响应成功会执行的函数
// fn2: 响应失败会执行的函数
axios.interceptors.response.use(
  (res) => {
    console.log('响应成功的拦截')
    return res
  },
  (err) => {
    console.log('服务器响应失败')
    return err
  }
)

 axios区分不同环境->手动配置(不推荐)；根据process.env.NODE_ENV区分；编写不同环境变量配置文件

//src->services->request->config.ts
//根据process.env.NODE_ENV区分

let BASE_URL = ''
const TIMEOUT = 30000
if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'https://jsonplaceholder.typicode.com'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://yx.org/prod'
} else {
  BASE_URL = 'http://yx.org/test'
}
export { BASE_URL, TIMEOUT }

​
//根目录下创建.env.development、.env.production、.env.text
//命名规则 VUE_APP_名字，在里面配置你想要的内容即可，示例如下
VUE_APP_BASE_URL = https://jsonplaceholder.typicode.com
VUE_APP_BASE_NAME = yx

axios封装之后可扩展性更好，这里不做详细说明了

注：对于一些eslint警告，我们可以关掉提示，例如定义any类型在.eslintrc.js文件的rule中加入下面代码，其他类似

'@typescript-eslint/no-explicit-any': 'off'

遇到的问题：

1.在按需引入的时候如果我使用babel-plugin-import，则不会出现对应的样式，好像是因为该插件目录结构变化了，但是按照网上的配置依旧不行。这里按照官网配置按需引入，但是使用loading会有下面问题，不知道其他插件会不会也有问题，暂时没有试验

2.在对element-plus进行按需封装之后，前面引入elbutton确实可以，但是当我使用loading时候出现问题，我是按照官方步骤添加一下代码，打开页面之后没有动画，有loading显示但是是从页面的一半开始可以向下滑动看到loading...。

import { ElLoading } from 'element-plus'
ElLoading.service({
    lock: true,
    text: 'loading...',
    background: 'rgba(0, 0, 0, 0.7)'
})

在代码中引入样式则可以正常运行，但是我不是按需引入了吗？elbutton都不需要引入样式就可以正常运行？

import 'element-plus/theme-chalk/el-loading.css'