特别注意:需要使用管理员权限来打开命令提示符,不然会出现各种报错
yarn
npm install -g yarn
vite
1.使用vite创建项目
yarn create vite
2.安装包和运行
//或yarn
yarn
yarn dev
3.在vs code安装volar插件和Ant Design Vue Helper插件
需要注意的是volar与vetur插件相冲突,所以得禁用vetur
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/*"],}