Vue3+Vite实现项目搭建步骤

npm install -g create-vite-app

create-vite-app vue3-demo

npm install vue-router@4.0.3

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

// 开启历史模式
// vue2中使用 mode: history 实现
const routerHistory = createWebHistory();

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: () => import('../views/Home.vue')
        },
        {
            path: '/about',
            component: () => import('../views/About.vue')
        }
    ]
})

export default router

<template>
  <div class="nav-btn">
    <router-link to='/'> Home</router-link>
    <router-link to='/about'>About </router-link>
  </div>
  <router-view></router-view>
</template>

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

const app = createApp(App)
app.use(router)
app.mount('#app')

npm install less less-loader --save

const path = require('path')

module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, './src')
  },
  hostname: 'localhost', // 默认是 localhost
  port: '8000', // 默认是 3000 端口
  open: true, // 浏览器自动打开
  https: false, // 是否开启 https
  ssr: false, // 服务端渲染
  base: './', // 生产环境下的公共路径
  outDir: 'dist', // 打包构建输出路径，默认 dist ，如果路径存在，构建之前会被删除
  proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
    '/api': {
      target: 'http://127.0.0.1:7001', // 后端服务实际地址
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

npm install element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

<el-button type="primary" @click="show">Primary</el-button>

import { ElMessage } from 'element-plus'

setup() {
  function show() {
    ElMessage('王佳伟，你好棒啊！')
  }
  return { show }
}

npm install vuex@4.0.0-rc.2

// state.js 文件
let state = {}
export default state

// getters.js 文件
let getters = {}
export default getters

// mutations.js 文件
let mutations = {}
export default mutations

// actions.js 文件
let actions = {}
export default actions

// index.js 文件
import { createStore } from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default createStore({
    state,
    getters,
    mutations,
    actions
})

import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')

let state = {
    username: '我是ed.';
}

<el-button type="primary" @click="show">Primary</el-button>

<script>
  import { ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  export default {
    setup() {
      const store = useStore()
      function show() {
        ElMessage(store.state.username)
      }
      return { show }
    }
  }
</script>

npm install axios

import axios from 'axios'

const service = axios.create({
  baseURL: '/',
  timeout: 9000, // 请求超时时间
})

export default service

import request from '/@/utils/request'

let login = {};
systemInfo.login = function (data) {
  return request({
    url: '/ed/login',
    data,
    method: 'post'
  })
}

export default login