vue3_ts_cms

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn’t feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

Disable the built-in TypeScript Extension
1. Run Extensions: Show Built-in Extensions from VSCode’s command palette
2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

配置vue文件类型声明

在env.d.ts文件夹配置 4-9行

配置项目环境

安装volar 和volar+ts插件

配置项目代码规范 -见markdown

1.集成editorconfig配置根目录创建.editorconfig文件 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 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

配置vscode 文件->首选项->设置
    1.搜索default format（定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。）
    选择Prettier - Code formatter
    2.搜索Format On Save 勾选

1.安装prettier

npm install prettier -D

2.配置.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
}

3.创建.prettierignore忽略文件

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

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

/public/*

4.VSCode需要安装prettier的插件

5.VSCod中的配置

settings =>format on save => 勾选上
settings => editor default format => 选择 prettier

1.3. 使用ESLint检测

1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件：

3.解决eslint和prettier冲突的问题：

安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

npm install eslint-plugin-prettier eslint-config-prettier -D

添加prettier插件：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

4.VSCode中eslint的配置

  "eslint.lintTask.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

项目目录结构划分

base-ui 其他项目公用组件 views 每个页面的视图 hooks 一些可复用的方法像钩子一样挂着，可以随时被引入和调用以实现高内聚低耦合的目标，应该都能算是hook； ……

CSS样式的重置

.对默认css样式进行重置：在main.ts导入该样式 npm install normalize.css npm install reset.css .normalize.css

在assets/css中创建 .commen.less 复用文件 .index.less 入口文件 .reset.less 修改样式，在网上找一些就行

因为vite不能解析less文件，要安装依赖 npm install less -D

全家桶-路由配置

1. 安装路由：npm install vue-router
2.在src/router创建index.ts文件
3.配置好后在main.ts中使用
4.创建not-found视图：用户输入不存在页面时重定向到这个页面

全家桶-状态管理

1.安装pinia： npm install pinia
2.在src/store创建index.ts文件
3.在main.ts中使用pinia
4.创建对以上store

网络请求封装axios

1.安装axios: npm install axios 2.把之前封装好的库复制过来

区分development （开发）和production （生成）环境

.对于有一些变量，它在开发环境下的值和生成环境下的值是不匹配的例子： baseURL = “服务器地址” （开发环境服务器地址，和生成环境服务器地址不是同一个，是两台服务器甚至多台。）有两台服务器对于前端来说我们要保存的标识符在开发环境和生产环境用的不是同一个

1.Vite的环境变量 Vite在一个特殊的import.meta.env对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量 import.meta.env.MODE:{string}应用运行的模式 import.meta.env.PROD:{boolean}应用是否运行在生产环境 import.meta.env.DEV:{boolean}应用是否运行在开发环境（永远于import.meta.env.PROD相反） import.meta.env.SSR:{boolean}应用是否运行在server上

2.vite使用dotenv从你的环境目录中的下列文件加载额外的环境变量里面的变量名必须以VITE开头 .env文件开发环境生产环境都会读取 .env.development 开发环境读取 .env.production 生产环境读取 .env.local 所有情况都会加载，但会被git忽略 .env.[mode] 只在指定模式下加载 .env.[mode].local 只在指定模式下加载但会被git忽略

Element-Plus集成

1.安装element-plus： npm install element-plus 2.安装自动导入插件： npm install -D unplugin-vue-components unplugin-auto-import 3.官网有（然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中）(配置时，指定文件生成位置：dts: ‘src/auto-imports.d.ts’ 另一个同上)

2.注意：2.当按需引入时会生成两个文件 auto-imports.d.ts components.d.ts 把这两个文件在tsconfig.app.json里配置 “include”: [“env.d.ts”, “src//*”, “src//*.vue”, “auto-imports.d.ts”, “components.d.ts”],

3.按需导入只会导入里面的组件，不会帮我们自动导入 ‘反馈组件’ 例如：Loading。因为这些组件是在