Vue项目搭建和Element Plus

最新推荐文章于 2024-06-20 17:19:42 发布

上进的宋晓刚

最新推荐文章于 2024-06-20 17:19:42 发布

阅读量391

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2202_75310477/article/details/137807814

版权

本文详细介绍了如何使用VueCLI创建项目，配置Vue端口、vue-router及ElementPlus框架的安装和按需导入，同时展示了如何在vite.config.js中进行相应的设置。

摘要由CSDN通过智能技术生成

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()],
    }),
  ],
})