Vue 3 + Vite + Antdv项目创建

最新推荐文章于 2024-04-15 18:08:49 发布

Miruna

最新推荐文章于 2024-04-15 18:08:49 发布

阅读量1.3k

点赞数 1

文章标签： vue.js npm javascript anti-design-vue

本文链接：https://blog.csdn.net/Ma_jiao/article/details/131376212

版权

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.json中antd-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');