标签：-- 选择 red 文件后缀名 ken route col class win
vitevite搭建vue项目
windows + R 输入cmd 进入终端
cd..
cd D:\Vue\vite\text 进入要创建项目的文件夹下
导入element plus
1. npm install element-plus --save 在项目的终端中安装（每一个项目都要重新装）
2. 在 index.html 文件中引入样式：
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
3. 在 main.js 中写入以下内容：（全局引入）
import { createApp } from ‘vue‘
import ElementPlus from ‘element-plus‘;
import ‘element-plus/lib/theme-chalk/index.css‘;
import App from ‘./App.vue‘;
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app‘) //要在最下面
路由router
npm install vue-router@next --save 在项目中安装路由router
在src目录下创建 router 文件夹，添加 index.js 文件
在src目录下创建 view 文件夹，添加 welcome.vue 文件
配置router文件，在 index.js 中写入：
import {createRouter, createWebHashHistory} from ‘vue-router‘;
// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import welcome from "../view/welcome.vue";
const routes = [
{ path: "/", redirect: ‘/welcome‘ },
{ path: "/welcome", component: welcome }
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})
在main中引入router，在 main.js 中写入：
import router from ‘./router/index‘ app.use(router) app.mount(‘#app‘) //要在最下面
可以在项目中使用 <router-view></router-view> 使用路由了
引入全局样式css文件
创建 index.css 文件,写入全局的样式:
html,body,#app{ /* width: 100%; */ height: 100%; margin: 0; padding: 0; }
在main中引入css文件, 在main.js 文件中写入:
import CSS from ‘../index.css‘
app.use(CSS)
app.mount(‘#app‘) //要在最下面
vite搭建vue项目 + element plus + 路由router + 全局样式布置
标签：-- 选择 red 文件后缀名 ken route col class win
原文地址：https://www.cnblogs.com/meinvfqf/p/14537162.html
