Vue项目搭建和Element Plus
1.0安装Vue项目,并且启动
创建项目
npm init vite
安装依赖
npm i
cd vue-project
npm run server
2.0配置vue端口号和vue自动启动项目,在文件vite.config.js中进行配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//自定义配置,自定义端口号
export default defineConfig({
server : {
open : true, //自动打开浏览器
port : 8080 //自定义端口号
},
plugins: [vue()],
})
3.0安装路由和配置路由
npm i vue-router -S
在package.json中可以看到vue-router这个参数
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.0",
"vue-router": "^4.3.0"
}
}
安装好路由后,下面进行配置路由
在src文件夹下创建router文件夹,在router下创建index.js
下面进行路由配置
在router/index.js下导入
import { createRouter,createWebHashHistory } from "vue-router";
const routes = [
{
path : 'home',
name : 'home',
component :() =>import('')
}
]
const router = createRouter({
history : createWebHashHistory(), //hash哈希
routes
})
export default router
在vite.config.js中进行配置
//自定义配置,自定义端口号
export default defineConfig({
server : {
open : true,
port : 8080
},
resolve :{ //这是加的的代码
alias : {
'@': path .resolve(__dirname,"src"),
}
},
plugins: [vue()],
})
安装element Plus框架
1.0cmd到vite-project下
npm add element-plus -S
2.0按需导入
npm install unplugin-vue-components
3.0在vite.config.js配置文件
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//自定义配置,自定义端口号
export default defineConfig({
server : {
open : true,
port : 8080
},
resolve :{
alias : {
'@': path .resolve(__dirname,"src"),
}
},
plugins:
[
vue(),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})