vue3.2+vite 创建项目

0、项目创建

项目名称：px-vue

 

E:\study10\vspro>npm create vite
npx: installed 6 in 10.911s
√ Project name: ... px-vue
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in E:\study10\vspro\px-vue...

Done. Now run:

  cd px-vue
  npm install
  npm run dev


E:\study10\vspro>cd px-vue

　　

vs.tsconfig.ts配置：

1、安装 node ts插件支持 

终端执行：npm i '@types/node' --save-dev

2、配置别名：@ 和 com

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    port: 3001
  },
  resolve:{
    alias:{
      "@": path.resolve(__dirname,"src"),
      "com": path.resolve(__dirname,"src/components"),
    }
  },
})

3、add style-resources-loader  scss

npm i sass --save-dev 
npm i sass-loader --save-dev 
npm i node-sass --save-dev

或者

npm install node-sass sass-loader sass -D

　　

4、使：vue文件可以用别名导入组件 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "types": [
      "pinia-plugin-persist"
    ],
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"],
      "com":["src/components/*"]
    }

  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5、状态管理： piniapinia-use-persist 存储  加密

参考：https://blog.csdn.net/lopda/article/details/125034231
参考：https://www.npmjs.com/package/pinia-use-persist

 

 5、安装vue-router4

npm i -S vue-router@4