Vue 3 + Vite + Antdv项目创建

Vue 3 + Vite + Antdv

1、初始化项目

构建项目

在终端执行npm init vite 命令

2、 添加ant-design-vue相关依赖包

//安装脚手架
npm install -g @vue/cli
//mac用这个
sudo npm install -g @vue/cli

//使用组件
npm i --save ant-design-vue@next
//OR
//sudo npm i --save ant-design-vue@next

安装脚手架遇到的问题

npm install -g @vue/cli
npm ERR! code EACCES
npm ERR! syscall link
npm ERR! path /Users/miruna/.npm/_cacache/tmp/5787a813
npm ERR! dest /Users/miruna/.npm/_cacache/content-v2/sha512/55/fc/0b41c1d42815edb882f6a9b097095a83fa70d8bb25c568cd306c45b85ad3a510c0e6c871f42deb7c0701cfe93e35317a082a37131af0ac56469fb547db18
npm ERR! errno EACCES
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/miruna/.npm"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/miruna/.npm/_logs/2023-06-25T02_10_53_228Z-debug-0.log

解决:sudo chown -R 501:20 "/Users/miruna/.npm"

npm install -g @vue/cli                  
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/@vue
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/@vue'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/miruna/.npm/_logs/2023-06-25T02_13_46_031Z-debug-0.log
miruna@mirunadeMacBook-Pro vite-vue3-antdv % 

解决:Mac安装报错,因为没有权限,加上sudo即可,sudo npm install -g @vue/cli

2.1 在main.js中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app')

引入import 'ant-design-vue/dist/antd.css'报错,查看package.jsonantd-design-vue的版本是多少,我原来是^4.0.0-rc.5,后来改成 ^3.2.15重新install就好了

2.2 修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, "src")
    }
  },
  plugins: [vue()],
  server: {
    port: 8090,//前端端口
    proxy: {//反向代理,通过axios调用后端服务,解决跨域问题
      "/api": {
        target: "http://localhost:8081",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    }
  }
})

3、路由配置

3.1安装vue-router

npm i vue-router --save
//OR
sudo npm i vue-router --save

3.2 创建router文件夹,在router文件中创建index.js

index.js

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
    {
        path: '/page1',
        component: () => import('../views/demo/page1.vue')
    },
    {
        path: '/page2',
        component: () => import('../views/demo/page2.vue')
    }
];
const router = createRouter({
    history: createWebHashHistory(),
    routes
});
export default router;

3.3 修改main.js文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import Antd from 'ant-design-vue';
import router from './router';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(router).use(Antd).mount('#app');
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值