装置与启动步骤

装置 yarn

首先用 yarn 命令进行装置，没有这个命令的同学能够先装置一下
npm install yarn -g

装置 vite 我的项目并启动

yarn create vite-app <project name>
cd  项目名称 进入目录即可
 yarn install
 yarn dev

vite 配置

配置文件为 vite.config.js
启动配置文件和 webpack 形式一样 package.json 里 “dev”: “vite –config ./vite.config.js”

const {resolve} = require('path')
export default {
    alias: {'/@/': resolve(__dirname, './src')
    }
}

留神： 这里定义 @目录时，后面必须要增加斜杠 / 示意从根目录进来获取组件。而依据下面的定义则示意 /@这个符号间接会指向根目录下的 src 文件夹

vue 中路由的配置应用时如下
component: () => import('@/components/HelloWorld2.vue'),
改为
component: () => import('/@/components/HelloWorld2.vue'),
如果没有这个 /@则调用的地位会主动从 @node_module 里去查找目录，导致门路始终获取失败。

创立路由

文件目录配置好之后咱们就能够创立路由

## 装置路由：

yarn add vue-router@next // 先装置路由

创立路由文件并配置路由

根目录下创立文件夹 router, 在到 router 里创立路由文件 router.js
代码如下：

import {createRouter, createWebHistory} from "vue-router";
// 路由信息
const routes = [
    {
        path: "/aaa",
        name: "aaa",
        component:  () => import('/@/components/HelloWorld2.vue'),
    }
];
// 导出路由
export default createRouter({history: createWebHistory(),
  routes,
});

援用路由

路由尽管创立好了但没有用到以后我的项目中，所以咱们须要援用路由
在根目录下有个 main.js 文件 代码改为如下

import {createApp} from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index.js'
var app = createApp(App)
app.use(router)
app.mount('#app')

也就是 app.use(router)则示意应用了路由
留神： import Vue from ‘vue’ 这种写法也不再反对了，增加进来就报错，所以要援用外面的 cteateApp 办法则只能改为

import {createApp} from 'vue'

接口代理配置

在 scr/config/index-vite.js 中可配置代理服务器

var config = {
      title: 'guiplan,element-plus', // 后盾题目
      localUrl:'http://127.0.0.1:7070/',
      baseUrl: { // api 申请根底门路
        dev: '/user/list', // 开发环境下的接口地址
        pro: '/' // 正式环境接口地址
      }
}
module.exports = config

vite.config.js 配置

const {resolve} = require('path')
const config = require('./src/config/index-vite.js')
var obj = {
    alias: {'/@/': resolve(__dirname, './src')
    },
    proxy:{}}
obj.proxy[config.baseUrl.dev] = {
    target: config.localUrl,
    changeOrigin: true,
    // rewrite: path => path.replace(/^\/api/, '')
}
export default obj

整个流程为以后端后续地址为 /user/list 时，将指向 localUrl 地址
留神： 而且 还会将地址增加到 localUrl 后缀中也就是如下图

还要留神：每次批改 vite 相干配置得重启一下服务。也就是批改 vue 文件会自动更新，但批改配置文件则须要重启服务。（这一块不留神的话，你会始终认为配置都不起效而陷入死循环中）

常见的报错问题

npm run dev 只有报错，根本就是不能打包的。
这边用的 SFC 标准，所以只能依据提醒 格式化代码，让其定位错位地位。
如上图 3：4106 示意第三行第 4106 列地位。而后一一排查谬误。
vite 依据 SFC 标准所以对代码格局也有了很多的要求，比方单标签你不能再用双标签的模式去书写了。
还有的指令也不再反对了比方在 div 标签中增加 v -text 指令也会报错等等。
常见谬误有：

1. 单标签按双标签格局排版 <input></input>
2. v-text 指令应用也会报错，放到 div 中间接报错
3. 反复的指令或属性如一个 div 写了两个 class, 或者两个 v -for
4. 属性之间没有空格宰割如下图
   

开源 demo 下载

目前我已开源，前后端代码都有。尽管临时还不太成熟。但也能够用来学习交换或者进行二次开发。配合 guiplan 开发工具一件生成 vue，做我的项目也是会事倍功半。
https://gitee.com/guiplan/element-plus-vite/tree/master

总结

<font color=#999AAA > 我的文章与其余的不同，我会把每个我踩过的坑都记录下来，增加一个 留神 提醒来避免当前还会踩到，而我分享进来的之后心愿大家也多注意这些注意事项，因为每一个注意事项都是一个坑，如果不去留神就会消耗大把工夫去排除问题，要走很多弯路。