Installation and startup steps

Installation of yarn

NPM install yarn -g if you do not run the yarn command to install yarn -g

Install and start the Vite project

Yarn create vite-app <project name> CD Project name Go to the directory yarn install yarn devCopy the code

Vite configuration

Json “dev”: “vite –config./vite.config.js”

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

Note: The @ directory must be preceded by a slash/to indicate that the component is being retrieved from the root directory. The /@ symbol points directly to the SRC folder in the root directory

Vue road when used by the configuration of the following component: () = > import (‘ @ / components/HelloWorld2. Vue ‘), instead of component: () = > import (‘ / @ / components/HelloWorld2. Vue), if there is no this / @ the location of the call will automatically to look up the directory from the @ node_module, lead to the failure path for always.

Create routing

Once the files and directories are configured, we can create the route

Installation route:

Yarn add vue-router@next // Install routes first

Create a routing file and configure routes

Router.js (router, router, router.js);

import { createRouter, createWebHistory } from "vue-router"; / / routing information const routes = [{path: / aaa ", "name:" aaa ", component: () = > import (' / @ / components/HelloWorld2. Vue),}]. Export default createRouter({history: createWebHistory(), routes,});Copy the code

Refer to the routing

The route has been created but is not used in the current project, so we need to reference the route. There is a main.js file in the root directory and the code is changed to the following

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')
Copy the code

Use (router) : import Vue from ‘Vue’ is no longer supported, so reference cteateApp instead

import { createApp } from 'vue'
Copy the code

Interface Proxy Configuration

You can configure the proxy server in SCR /config/ index-viet. js

Var config = {title: 'guiplan,element-plus', // localUrl:'http://127.0.0.1:7070/', baseUrl: {// API request base path dev: '/user/list', // development environment interface address pro: '/' // official environment interface address}} module.exports = configCopy the code

Vite. Config. Js configuration

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
Copy the code

The entire process is directed to localUrl if the subsequent address of the current end is /user/listNote:It also adds the address to the localUrl suffix as shown below Also note that: Restart the vite service every time you change the vite configuration. If you modify the vue file, the service is automatically updated. If you modify the configuration file, you need to restart the service. (If you don’t pay attention to this one, you’ll be stuck in a loop thinking configurations don’t work.)

Common error reporting problems

NPM run dev cannot be packaged as long as an error is reported. The SFC specification is used here, so you can only format the code as prompted to locate the misalignment. The position of column 4106 in the third row is shown in figure 3:4106. Then go through the errors one by one. Vite according to the SFC specification so the code format also has a lot of requirements, such as single label you can no longer use the form of double label to write. Other directives are no longer supported, such as adding a V-text directive to a div tag. Common errors include:

  1. A single label is formatted in a double label format
  2. The v-text command also generates an error when placed in a div
  3. Duplicate instructions or attributes such as a div with two classes, or two V-fors
  4. Properties are separated without Spaces as shown below

Open Source Demo Download

At present, I have open source, front and back end code. It’s not quite ripe yet, though. But it can also be used for learning, communication or secondary development. Cooperate with Guiplan development tool to generate VUE, and you will get twice the result with half the effort. Gitee.com/guiplan/ele…

conclusion

My articles with other different, I’ll record each pit I tread, add a note tips to prevent’ll stepped on, and I share out after I hope you also pay more attention to these considerations, because each note is a pit, if don’t pay attention to will take time to troubleshoot problems, leaving many detours.