1. 技术栈介绍
vue3：组件封装和拆分比Vue2更加细化和合理。
typescript：比js更加严格的类型检查，能够在编译期就能发现错误。
vite：下一代前端开发和构建工具。
element plus：ui组件库，比较热门的vue组件库之一。
axios：基于promise的网络请求库。
vue-router：路由控制。
keep-alive: 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
pinia：状态管理类库，比vuex更小，对ts的支持更友好。
volar插件：代码补全和检测工具，可以尝试替换vetur，如果不替换的话，用ts的语法糖的时候会出现找不到默认的default的错误。
pnpm：比npm和yarn更强大的包管理工具，包安装速度极快，磁盘空间利用效率高。
2. 开发环境准备
#全局安装pnpm
npm i pnpm -g
3. 创建项目
# npm 6.x
npm init vite@latest my-vue-app --template vue-ts
# npm 7+, 需要额外的双横线
npm init vite@latest my-vue-app -- --template vue-ts
# yarn
yarn create vite my-vue-app --template vue-ts
# pnpm
pnpm create vite my-vue-app -- --template vue-ts
4. 引入vue-router
pnpm i vue-router@latest -D
5. 引入axios
pnpm i axios -D
6. 引入pinia
pnpm i pinia -D
7. 引入element-plus
pnpm i element-plus -D
项目搭建完成可以运行起来试试
pnpm run dev
8. 配置使用 element-plus
#配置src/main.ts文件
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入element-plus
import element from 'element-plus'
import 'element-plus/dist/index.css' // 不引入会导致ui样式不正常
createApp(App).use(element).mount('#app')
9. 配置环境信息
- 根目录新建.env.development(开发环境)文件
# 文件中配置变量以VITE_开头, 后面接变量名 例如 VITE_ENV = "development" ,ENV为变量名
#环境
VITE_ENV = "development"
#基础地址
VITE_BASE_PATH = "http://1920.1080.1.1"
#服务
VITE_BASE_API='/api'
#端口
VITE_PROT = 9527
#地址
VITE_PUBLIC_PATH='./'
#修改project命令, 在dev运行命令后加入 --mode 文件名 例如 "serve": "vite --mode development", 运行时自动读取 .env.development文件
#build打包时默认是读取.env.production文件的所以不用配置
- 同理配置testing（测试环境）；release（预发环境）；production（生产环境）
- 安装 pnpm install dotenv 根据环境变量运行 使用配置详见下方 vite.config.ts
pnpm install dotenv
10.自动引入组件和vue方法的插件
pnpm install -D unplugin-vue-components unplugin-auto-import //下载插件
//vite.config.js中配置
import AutoImport from 'unplugin-auto-import/vite' //自动引入api
import Components from 'unplugin-vue-components/vite' //按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//在plugins配置中配置
export default () => {
return defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()], //对于element puls的配置
imports: [
'vue', //自动引入的vue的ref等方法
'vue-router', //引入useRoute等方法
{ //对于vue-router的type的扩展,配置后可以直接使用
from: 'vue-router',
imports: ['RouteLocationRaw',],
type: true,
},],
dts: 'src/auto-imports.d.ts'
}),
Components({
resolvers: [ElementPlusResolver()], //对于element puls的配置
}),
],
})
}
//使用:
//在此处配置element plus后, 可以直接使用,仁和地方都不用再引入,自动按需引入的,在components.d.ts中可以看到生成文件
//import {ref} from "vue"这种引入也可省略, 直接使用即可, 具体引入的类型在src/auto-imports.d.ts文件中可见
//注意:修改vite.config.ts文件后需要重启
11. 配置使用 vue-router
1.如果使用require需要安装@types/node
cnpm i @types/node -D
//vite.config.js中配置
import { defineConfig, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite' //自动引入api
import Components from 'unplugin-vue-components/vite' //按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// @ts-ignore
import fs from 'fs'
// @ts-ignore
import dotenv from 'dotenv'
//在plugins配置中配置
export default defineConfig(({ mode }: UserConfig): UserConfig => {
// 根据环境变量加载环境变量文件
const ASR_ENV = dotenv.parse(fs.readFileSync(`.env.${mode}`))
return {
base: ASR_ENV.VITE_PUBLIC_PATH, // 环境路径
server: {
open: true, // 是否主动唤醒浏览器
host: '0.0.0.0',
port: 9527,// ASR_ENV.VITE_PROT,
https: false,
proxy: {
[ASR_ENV.VITE_BASE_API]: {
target: `${ASR_ENV.VITE_BASE_PATH}`,
changeOrigin: true,
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'assets': path.resolve(__dirname, 'src/assets'),
'components': path.resolve(__dirname, 'src/components'),
'config': path.resolve(__dirname, 'src/config'),
'router': path.resolve(__dirname, 'src/router'),
'tools': path.resolve(__dirname, 'src/tools'),
'views': path.resolve(__dirname, 'src/views'),
'plugins': path.resolve(__dirname, 'src/plugins'),
'store': path.resolve(__dirname, 'src/store')
}
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()], //对于element puls的配置
imports: [
'vue', //自动引入的vue的ref等方法
'vue-router', //引入useRoute等方法
{ //对于vue-router的type的扩展,配置后可以直接使用
from: 'vue-router',
imports: ['RouteLocationRaw',],
type: true,
},],
dts: 'src/auto-imports.d.ts'
}),
Components({
resolvers: [ElementPlusResolver()], //对于element puls的配置
}),
],
css: {
preprocessorOptions: {
scss: {
charset: false,
},
},
},
build: {
outDir: 'dist', // 指定输出路径
assetsDir: 'static', // 指定生成静态资源的存放路径
minify: 'terser', // 混淆器,terser构建后文件体积更小 ,boolean | 'terser' | 'esbuild',默认使用esbuild
sourcemap: false, // 是否产出soucemap.json
manifest: false, // 是否产出maifest.json
// reportCompressedSize: true,
chunkSizeWarningLimit: 1500,
terserOptions: {
compress: {
drop_console: true, // 生产环境移除console
drop_debugger: true // 生产环境移除debugger
}
},
},
}
}
//使用:
//在此处配置element plus后, 可以直接使用,仁和地方都不用再引入,自动按需引入的,在components.d.ts中可以看到生成文件
//import {ref} from "vue"这种引入也可省略, 直接使用即可, 具体引入的类型在src/auto-imports.d.ts文件中可见
//注意:修改vite.config.ts文件后需要重启
2.在src下新建一个router文件夹，作为vue-router的配置目录。此目录下再新建index.ts文件，编辑内容如下：
#配置router/index.ts文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'home',
component: () => import('@/views/home/index.vue'),
},
];
const router = createRouter({
history,
routes,
})
export default router
- 在views目录下新建home目录并新建index.vue
#index.vue页面
<template>
<h2>{{ msg }}</h2>
<h2>{{ count }}</h2>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('今天天气好晴朗')
const count = ref(710)
</script>
<style scoped>
</style>
4.在main.ts中引入vue-router
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入vue-router
import router from './router'
// 引入element-plus
import element from 'element-plus'
import 'element-plus/dist/index.css' // 不引入会导致ui样式不正常
createApp(App).use(router).use(element).mount('#app')
12. axiox配置使用
- 安装插件：axios 和 js-cookie
pnpm i axios -D
pnpm i js-cookie
- 在src下新建utils文件夹 创建auth.ts与request.ts文件
// auth.ts
// @ts-ignore
import Cookies from 'js-cookie';
const TokenKey = 'asr-token';
export const getToken = () => Cookies.get(TokenKey);
export const delToken = () => Cookies.remove(TokenKey);
// request.ts
import axios from 'axios'; // 引入axios
import Vrouter from '@/router'
import { getToken } from '@/utils/auth';
const Router = Vrouter;
console.log('import.meta.env.VITE_BASE_API', import.meta.env.VITE_BASE_API)
const service = axios.create({
baseURL: import.meta.env.VITE_BASE_API as string,
timeout: 99999,
});
// http request 拦截器
service.interceptors.request.use(
(config:any) => {
// 全局添加 token
if (getToken()) {
config.headers['asr-token'] = getToken();
}
return config;
},
(error) => {
console.error(error);
return Promise.reject(error);
},
);
// http response 拦截器
service.interceptors.response.use(
(response) => {
if (response.data.code === 9) {
// Router.replace('/rejectUser');
return
}
return response.data
},
(error) => {
if (error.response && error.response.status && error.response.status === 403) {
// logout().then(() => {
// // removeToken()
// });
}
// 网络超时
if (error.message && error.message.includes('timeout')) {
console.error('请求超时');
return error.message;
}
if (error.response && error.response.status && error.response.status === 500) {
// 没有权限
console.error('接口异常');
return error;
}
return error;
},
);
export default service;
- src下新建types类型文件夹：用于声明类型
// /src/types/service/index.ts
interface resModel {
code:number
msg:string
data:any
[propname:string]:any
}
export interface requestModel {
<T>(data?: T): Promise<resModel>
}
4.src下新建 api文件，新建login.ts文件 用来写接口配置
import request from '@/utils/request';
import { requestModel } from '@/types/service';
// 获取用户信息
export const getLogin: requestModel = () => request({
url: '/login',
method: 'get',
});
// 获取用户信息
export const getUserInfo: requestModel = () => request({
url: '/info',
method: 'get',
});
// 退出登录
export const logout: requestModel = () => request({
url: '/quit',
method: 'post',
});
13. pinia 配置并使用
- 安装pinia-plugin-persist 用于仓库持久化
pnpm install pinia-plugin-persist
- 在根目录新建一个store 文件夹 新建 index.ts 文件
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)
//导出
export default store
- 在main.ts文件引入
//引入仓库
import pinia from '@/store/index';
app
.use(pinia)//使用
.mount('#app')
- 存储配置
#src/store/login.ts
import { defineStore } from 'pinia'
//导出仓库方法
export const loginStore = defineStore("login", {
state: () => ({
count: 0,
}),
getters: {
},
actions: {
//修改vccode的值
changeCount(value:number){
console.log('---loginStore---', value);
this.count=value
},
},
//持久化
persist:{
enabled:true,
strategies:[
{
key:'login',//存储的key值
storage:localStorage,//存储的位置
paths:['count'] //默认持久化state的全部，paths指定持久化的对象
}
]
},
})
14. keepAlive 页面缓存配置
- 我们之前在学习vue-router时，给每个路由都写了meta，里面写了keepAlive，现在是用它的时候了
{
path: '/',
component: () => import('./views/index'),
name: 'index',
meta: {
title: '首页',
keepAlive: true,
},
},
- 现在要把keepAlive写在router-view里面，使用作用域插槽获得页面组件
<!-- src/App.vue -->
<template>
<router-view v-slot="slotProps">
<keep-alive>
<component :is="slotProps.Component"></component>
</keep-alive>
</router-view>
</template>
<script setup lang="ts">
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
15. prettier 代码格式校验及整理
-
vscode下载prettier 插件
image.png - 根目录创建.prettierrc文件
{
"printWidth": 500, // 超过最大值换行
"tabWidth": 2, // 缩进字节数
"useTabs": true, // 缩进使用tab。 false使用空格
"semi": true, // 句尾添加分号
"singleQuote": true, // // 使用单引号代替双引号
"quoteProps": "as-needed", //
"trailingComma": "es5",// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"jsxSingleQuote": true, // 在jsx中使用单引号代替双引号
"jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"bracketSpacing": true,// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"insertPragma": false,
"disableLanguages":["vue"], // 不格式化vue文件，vue文件的格式化单独设置
"proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"endOfLine": "auto", // 结尾是 \n \r \n\r auto
"htmlWhitespaceSensitivity": "css",
"format": {
"defaultFormatter": {
"html": "js-beautify-html",
"js": "prettier"
},
"defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
"wrap_line_length": 100,
"end_with_newline": false,
"semi": true,
"singleQuote": true
},
"prettier": {
"semi": true,
"singleQuote": true
}
}
}
}
3.根目录下格式化忽略文件创建 .prettierignore文件
#.prettierignore文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
4.使用格式化推荐两种方式
a.配置整体格式化命令
运行后自动整体格式化,package.json中配置，每次提交代码之前需要运行命令npm run prettier
#package.json
"script":{
"prettier ": "prettier --write ."
}
#运行命令 npm run prettier
b.每次保存文件后自动格式化
这是vscode的步骤，其他编辑器自行根据下面的方案处理。
1、打开编辑器设置页面，输入 files.autoSave 筛出设置项，并把设置项属性选择为 onFocuschange
2、输入 editor.defaultFormatter ，将配置项选择为Prettier （设置默认代码格式化（美化）的插件为Prettier）
3、输入 editor.formatOnSave ，勾选上 "保存时格式化文件。格式化程序必须可用，xxxxxxxx....."
16. 问题整理
image.png
pnpm i @types/webpack-env @types/node -D#配置tsconfig.json { "compilerOptions": { ... "types": [ "node", "webpack-env" ] }, ... }
