vue3+vite 项目常用库

特别注意：需要使用管理员权限来打开命令提示符，不然会出现各种报错

yarn 

npm install -g yarn

 vite

1.使用vite创建项目

yarn create vite

2.安装包和运行

yarn
yarn dev

3.在vs code安装volar插件和Ant Design Vue Helper插件

需要注意的是volar与vetur插件相冲突，所以得禁用vetur

4.静态文件打包

public 目录下的静态文件要使用相对路径，"/"代表main.ts的同级目录，所以直接省略public

assets目录下的静态文件最好是通过引入  再使用，直接在模板里面使用路径，打包时读取不了,你下面，如果需要把logo放在assets下面，可以先引入，然后再将变量logoSrc 使用在模板中

import logoSrc from '@/assets/images/logo.png'

Ant design 

1.安装Ant design ui组件库

yarn add ant-design-vue

2.全局引入封装好的antd组件

//全局引入 src/main.ts
//引入ant deisgn核心文件
import antd from 'ant-design-vue'
// 引入ant design css样式
import 'ant-design-vue/dist/antd.css'
//全局注册
.use(antd)

vue-Router 

1.安装路由vue-Router

npm install vue-router@4

//yarn add vue-router@4

2.配置路由，在src/libs下新建router.ts文件

//配置路由router.ts
//引入路由组件
import {createRouter,createWebHistory} from 'vue-router'

//路由定义
const routers = [
    {
        name:'主页',
        path:'/',
        component: () =>import('../pages/home/home.vue')
    },
    {
        name:'登录页',
        path:'/login',
        component: () => import('../pages/login/login.vue')
    },
]

const router = createRouter({
    //路由配置
    routes:routers,
    //历史页面
    history:createWebHistory()
})

//导出封装好的路由，代其他地方调用
export default router

3.创建视图文件夹src/pages,存放路由页面

 axios

1.安装axios

yarn add axios

pinia

yarn add pinia

sass

1.安装scss依赖

yarn add -D sass

2.在vite.config.ts中配置sass 全局变量

// 配置样式sass全局变量
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/assets/css/global/index.scss";',
      },
    },
  },

配置@绝对路径

1.安装node 依赖

yarn add  @types/node

2.vite.config.ts配置

import path from 'path'


export default defineConfig({
  plugins: [
    vue(),
  ],
  // 配置绝对路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
})

3.在tsconfig.json中"compilerOptions"选项中添加（ts 必须）

"baseUrl": "./",
    "paths": {
      "@": [
        "src"
      ],
      "@/*": [
        "src/*"
      ],
    }