vite官网
项目初始化
准备安装工作(按步骤创建)
npm init vue@latest
创建完成后再次安装对应插件
然后百度配置main.ts里面引入
npm i pinia --save //安装pinia
npm i vue-router --save //安装router
npm i axios --save //安装axios
//安装sass或less
npm add -D scss
npm add -D less
快速创建项目–推荐
npm init vite@latest project-name --template vue-ts//
//npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts // npm 6.x
然后根据提示所选配置即可
创建完安装对应插件
eslint校验代码工具的配置
prettier格式化工具配置
VueUse工具函数包
集成配置
npm i @types/node --save-dev
修改 tsconfig.json文件内容
{"compilerOptions": {"typeRoots": ["node_modules/@types","src/types"],"target": "esnext","useDefineForClassFields": true,"module": "esnext","moduleResolution": "node","strict": true,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"esModuleInterop": true,"lib": ["esnext", "dom"],"baseUrl": "./","paths":{"@": ["src"],"@/*": ["src/*"],}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
修改 vite.config.ts文件内容
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, 'src')}},plugins: [vue()],
// server: {port: 3000, hmr: {host: "0.0.0.0",port: 3000,},proxy: {'/api': {target: 'your https address',changeOrigin: true,rewrite: (path: string) => path.replace(/^\/api/, '')}}}
});
// PS
/*
//设置别名alias: {'@': path.resolve(__dirname, 'src')}},plugins: [vue()],server:
{port: 3000,
//启动端口hmr: {host: "0.0.0.0",port: 3000,},// 设置 https
代理proxy: {'/api': {target: 'your https address',changeOrigin: true,rewrite: (path: string) => path.replace(/^\/api/, '')}
*/
安装eslint
npm i eslint eslint-plugin-vue --save-dev
因为 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，所以需要安装 @typescript-eslint/parser 替代掉默认的解析器
npm install @typescript-eslint/parser --save-dev
安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。
npm install @typescript-eslint/eslint-plugin --save-dev
创建配置文件： .eslintrc.js
module.exports = {parser: 'vue-eslint-parser',parserOptions: {parser: '@typescript-eslint/parser',ecmaVersion: 2020,sourceType: 'module',ecmaFeatures: {jsx: true}},extends: ['plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended',],rules: {// override/add rules settings here, such as:}
};
创建忽略文件：.eslintignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*node_modules/
dist/
dist-ssr
*.local# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
命令行式运行：修改 package.json
{"scripts": {"eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件","eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",}
}```
#### 安装prettier
```javascript
npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
创建配置文件： prettier.config.js 或 .prettierrc.js
//粘贴板
module.exports = {
printWidth: 80, tabWidth: 4, useTabs: false, semi: true, singleQuote: true, quoteProps: 'as-needed', jsxSingleQuote: false, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, arrowParens: 'always', rangeStart: 0, rangeEnd: Infinity, prettierrequirePragma: false, prettierinsertPragma: false, proseWrap: 'preserve', htmlWhitespaceSensitivity: 'css', lfendOfLine: 'auto'
}
// 详解版
module.exports = { // 一行最多 80 字符printWidth: 80,// 使用 4 个空格缩进tabWidth: 4,// 不使用 tab 缩进，而使用空格useTabs: false,// 行尾需要有分号semi: true,// 使用单引号代替双引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: 'as-needed',// jsx 不使用单引号，而使用双引号jsxSingleQuote: false,// 末尾使用逗号trailingComma: 'all',// 大括号内的首尾需要空格 { foo: bar }bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数，只有一个参数的时候，也需要括号arrowParens: 'always',// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 @prettierrequirePragma: false,// 不需要自动在文件开头插入 @prettierinsertPragma: false,// 使用默认的折行标准proseWrap: 'preserve',// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: 'css',// 换行符使用 lfendOfLine: 'auto'
}
****命令行式运行：修改 package.json
{"scripts": {"prettier:comment": "自动格式化当前目录下的所有文件","prettier": "prettier --write"}
}
安装Pinia
Pinia这个文档移步
npm install pinia
在src文件里面创建store文件-index.ts在main.ts中引用pinna
import {createPinia} from 'pinia'
const store = createPinia()
createApp(App).use(router).use(store).mount('#app')
index.ts文件
import { defineStore } from 'pinia'
export const studyStore = defineStore("getNum", {
state:()=>{
return {
num:1 as number
}
},
//类似于computed 可以帮我们去修饰我们的值
getters:{
},
//可以操作异步 和 同步提交state
actions:{
}
})
其他页面使用
<template>
<div>
<span>data:{{ test.num }}</span>
<button @click="add">数字++</button>
</div>
</template>
<script setup lang="ts">
import { studyStore } from "../store"
const test = studyStore()
let add = () => {
test.num++
}
</script>
安装Vue-Router
在这里插入代码片
安装VueUse
在这里插入代码片
安装scss 或 less
在这里插入代码片
安装axios/进行封装
在这里插入代码片
项目优化一下
在这里插入代码片
vs出线ref红波线解决
2种方式
1 引入ref爆红记得去更新vetur
安装vetur TypeScript这个插件
2 vetur 这个插件不支持vue3的setup语法糖的写法格式了，
你只需要停掉现有的vetur，
再去下载vue Language Features和TypeScript Vue Plugin，
第一个是支持vue3的标准语法的，
第二个是针对ts的，都安装后，重启vscode即可
