[ vue3项目搭建 ]

发表评论
136 views

vue3项目搭基础结构

node v20.8.1

安装

  1. 安装cnpm
 npm install -g cnpm --registry=https://registry.npmmirror.com
 ```

2. 使用vite脚手架创建vue项目

cnpm create vite@latest my-vue-app --template vue

3. 启动项目

918 cd my-vue-app/ 920 cnpm install 950 npm run dev

4. 安装依赖（less, router, element-plus自动导入/图标)

cnpm install less vue-router element-plus -s cnpm install @element-plus/icons-vue -s cnpm install -D unplugin-vue-components unplugin-auto-import

### 项目配置

vite.config
    - 配置src路径为@替换
    - 配置element-plus按需导入

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

  // 添加导入包别名
  resolve: {
    alias: [
      {
        find: "@", replacement: "/src",
      }
    ]
  }
})

配置路由router /src/router/index.js

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path: "/",
        name: "main",
        component: () => import("@/views/Main.vue")
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
}
)

export default router;

注册使用router, 和element-plus图标 main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from "./router";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'


const app = createApp(App);
app.use(router).mount("#app");
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

最后App.vue使用router

<script setup>
</script>

<template>
    <router-view></router-view>
</template>

<style scoped>
#app{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

</style>