目录

1、安装 vue-cli 3
yarn add vue-cli@next
2、安装vite
vue add vite
3、安装成功后package.json中会添加
"scripts": {
        "vite": "node ./bin/vite"
    }
"devDependencies": {
    "vue-cli-plugin-vite": "~1.5.0"
  }
  把scripts里的serve 和 build 改成vite
  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "lint": "vue-cli-service lint",
    "vite": "node ./bin/vite"
  },
4、通过@vitejs/plugin-vue插件来支持Vue
yarn add @vitejs/plugin-vue
5、安装路由
cnpm install --save vue-router@next
6、在入口文件里初始化vue实例，并引入所需要的插件

找到main.js文件，引入路由插件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import axios from 'axios'

createApp(App).use(router).mount('#app')
7、在index.html中载入main.js
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
    </style>
  </head>
  <body>
    <div id="app">
      <h1>正在加载中......</h1>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
8、App.vue

找到src底下的App.vue文件，此文件是项目的主组件，所有页面都是在App.vue下进行切换的。在App.vue中添加 ，用来承载路由组件

<template>
  <div id="app">
    <router-view/>  
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
</style>
9、路由配置

在src底下新建文件夹和文件router/index.js，index.js里简单写下路由：

import {createRouter,createWebHistory} from 'vue-router'

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path: '/test2',
            component: () => import("../components/test2.vue")
        },
        {
            path: '/',
            name:'home',
            component: () => import("@/components/HelloWorld.vue")
        },
    ]
})

export default router
10、vite.config.js

在项目最外层新建vite.config.js文件，简单的配置：

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from '@vitejs/plugin-vue';
function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}

export default defineConfig({
    base: "",
    plugins:[vue()],
    // 配置文件别名
    resolve: {
        alias: {
          "@": pathResolve('src'),
        }
    },
    // 打包配置
    build: {
        target: 'modules',
        outDir: 'dist', //指定输出路径
        assetsDir: 'static', // 指定生成静态资源的存放路径
    },
    // 本地运行配置，及反向代理配置
    server: {
        cors: true, // 默认启用并允许任何源
        open: true, // 在服务器启动时自动在浏览器中打开应用程序
        proxy: {
            '/api': {
                target: 'http://192.168.0.2:8080', 
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
    }
})
11、启动项目
启动：yarn serve、npm run serve
打包：yarn build、npm run build
# vue.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟