vue3常用ui库
element-plus官网
ant-design-vue 2.x
vant 3.x
vue3项目搭建基本流程配置
使用 vite 创建vue3
cnpm i create-vite-app //安装vite
npm init vite-app demo //使用vite 安装vue3
cd demo //切换到项目根目录
cnpm i //安装相关依赖
npm run dev //运行项目
访问网址即可看到
vite.config.js 配置文件
之前vue2中使用的是vue.config.js,使用vite搭建的项目就需要在根目录下配置vite.config.js,相比vue2的配置要简明的多。
const path = require("path");
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, "./src"));
module.exports = {
alias: {
// 键必须以斜线开始和结束
"/@/": path.resolve(__dirname, "./src"),
},
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: "./",
/**
* 与“根”相关的目录,构建输出将放在其中。如果目录存在,它将在构建之前被删除。
* @default 'dist'
*/
outDir: "dist",
port: 3000,
// 是否自动在浏览器打开
open: false,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
// 引入第三方的配置
// optimizeDeps: {
// include: ["moment", "echarts", "axios", "mockjs"],
// },
proxy: {
// 如果是 /api 打头,则访问地址如下
"/api": {
target: "https://baidu.com/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
};
vueRouter
安装vue-router@next,最新版路由
cnpm install vue-router@next --save
1
在src目录下创建route路由目录,添加index.js
(记得创建view文件夹和login.vue文件)
import {createRouter, createWebHashHistory} from 'vue-router';
// 1. 定义路由组件, 注意,这里一定要使用 文件的全名(包含文件后缀名)
import login from "../view/login.vue";
const routes = [
{
path: "/",
redirect: '/login'
},
{ path: "/login", component: login },
]
// Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})
在main.js中引入router
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './route/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
完毕!
交流群: 190975193 ( 群内有免费的vue3+elementplus实战视频教程 )