vue项目经常要用的小炒

快速搭建vue项目和elementPlus

shell

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

安装element-plus一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

shell

# element-plus选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

# element-plus的图标选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

在vue项目中配置element-plus和图标

javascript

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}


app
.use(ElementPlus)
.mount('#app')

快速配置vue-router路由

安装vue-router

shell

# NPM
$ npm install vue-router --save

# Yarn
$ yarn add vue-router

# pnpm
$ pnpm install vue-router

Create a file named router/index.js and add this to it:

javascript

import {createRouter,createWebHistory} from 'vue-router'
import Login from '../components/Login.vue'
const routes=[
  {
    path: '/',
    component:Login
  }
]
const router = createRouter({
  routes,
  history: createWebHistory()
})
export default router

设置main.js

import { createApp } from 'vue'
import './style.css' 
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'   

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}


app
.use(router)  
.use(ElementPlus)  
.mount('#app')

设置App.vue

html

<template>
  <!--通过router-view把组件加载进来-->
  <router-view></router-view>
</template>
<script >
export default {
  name: 'App',
  components: {
  }
}
</script>
<style>
</style>

快速配置vite的路径别名

下载path依赖

shell

npm i path -D

设置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  }
})

vue项目经常要用的小炒 #

vue项目经常要用的小炒