项目创建 Vue3 + Ts + vite + pinia

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这个文档移步

安装Vue-Router

npm install vue-router --save

安装完成后，在package.json中查看vue-router是否安装成功

"dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.1.3"    //vue-router安装成功，版本是^4.1.3
  },

配置router文件

新建 src/router 目录并在其下面创建 index.ts，导出 router

里面的login home 文件自行创建

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    meta: {
        title: '登录',
        keepAlive: true,
        requireAuth: false//表明该路由是否需要登录验证
    },
    component: () => import('../login.vue')
  },
  {
      path: '/',
      name: 'Index',
      meta: {
          title: '首页',
          keepAlive: true,
          requireAuth: true
      },
      component: () => import('../index.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

在main.js中引用index.ts

main.ts中代码如下

import { createApp } from 'vue'
import './style.css'
import './assets/reset.css'
import {createPinia} from 'pinia'
import router from './router/index.ts';//调用router
const store = createPinia()
import App from './App.vue'
console.log(import.meta.env.VITE_APP_URL);
createApp(App).use(store).use(router).mount('#app')
//赋值router的引入

以上完成了router的安装和配置，接下来是使用

App.vue添加

<template>
  <RouterView/>
</template>

然后根据路由路径进行查看对应的页面数据

安装VueUse

中文网址官网

VueUse是vue3的工具类 给setup专门写的简化工具

实现一个小demo 具体看官网案例
<template>
   <h1> 测试 vueUse 的鼠标坐标 </h1>
   <h3>Mouse: {{x}} x {{y}}</h3>
 </template>

 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useMouse } from '@vueuse/core'

     export default defineComponent({
         name: 'VueUse',
         setup() {
           const { x, y } = useMouse()

           return {
             x, y
           }
         }
     });
 </script>

npm i @vueuse/core

参考
常见效果

安装scss 或 less

scss安装配置请移步

安装axios/进行封装

axios请求封装

配置开发生产测试环境

环境变量

项目优化一下

删除多余的代码即可 保留需要用的

参考

axios参考

vs出线ref红波线解决

2种方式

1 引入ref爆红记得去更新vetur 
 安装vetur TypeScript这个插件
2 vetur 这个插件不支持vue3的setup语法糖的写法格式了，
你只需要停掉现有的vetur，
再去下载vue Language Features和TypeScript Vue Plugin，
第一个是支持vue3的标准语法的，
第二个是针对ts的，都安装后，重启vscode即可

参考请移步