1. Project construction

Enter the command:

yarn create vite

Copy the code

Enter a project name, for example, vite-vue2

Then select vanilla Framework, Vanilla Variant;

Tip:

Use vscode to open the project you just created for viet-vue2. The structure is as follows:

Is almost an empty project, we can first install dependencies, and then start the next look:

yarn 
Copy the code

The node_modules directory appears after the installation

Open terminal and enter NPM run dev;

npm run dev
Copy the code

The following figure appears, indicating that the project is already running.

Next, let’s install vue2.0 dependencies.

1.2 Installing Vue2.0 Dependencies

Install vite – plugin – vue2

yarn add vite-plugin-vue2
Copy the code

The corresponding dependencies are added to the package.json file

After the dependency is installed, using the vite plugin will need to create a new vite.config.js directory in the root directory:

Import {createVuePlugin} from 'vite-plugin-vue2' import {createVuePlugin} from 'vite-plugin-vue2' import {createVuePlugin} from 'vite-plugin-vue2' plugins: [createVuePlugin()] }Copy the code

Install vue2.0 dependencies.

yarn add vue 
yarn add vue-template-compiler
Copy the code

Two dependencies have been added to package.json

Add a SRC directory to the root directory and move main.js to SRC. Change the js path from index.html to main.js from SRC.

Create a new app. vue in the SRC directory and type the following:

<template>
  <div>vite-vue2-test</div>
</template>
Copy the code

Change the contents of main.js to:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
Copy the code

The environmental modification is done now let’s try running.

npm run dev
Copy the code

Open your browser:

It means it’s already running.

1.3. Add vue-Router

yarn add vue-router
Copy the code

1.3.1 Creating a Route.

Create the router directory under the SRC directory and create the index.js file in it. Input:

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '.. Use (VueRouter) // const routes = [{path: '/', name: 'home ', component: Home }, { path: '/detail', name: 'Detail', component: () => import('../pages/detail.vue') } ] const router = new VueRouter({ routes }) export default routerCopy the code

Modify the app. vue file

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/detail">detail</router-link>
    </nav>
    <router-view />
  </div>
</template>
Copy the code

Modify the main.js file to register routes globally.

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
Copy the code

Add the Pages folder under SRC

Create two new files named detail.vue and home.vue. Write simple code

The content of the browser becomes

1.3.2 Adding vuex — Store

yarn add vuex
Copy the code

Create a store directory under SRC and create index.js in store.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count(state) {
      return state.count
    }
  },
  mutations: {
    addCount(state, num) {
      state.count += num
    }
  },
  actions: {}
})
Copy the code

Register the store in main.js

import Vue from 'vue' import App from './App.vue' import router from './router/index.js' import store from './store' new  Vue({ router, store, render: h => h(App) }).$mount('#app')Copy the code

Try using store in home.vue and change home.vue to the following code

<template> <div> <h1>Home</h1> <div>count: {{ count }}</div> <button @click="addCount">+1</button> </div> </template> <script> export default { computed: { count() { return this.$store.getters.count; }, }, methods: { addCount() { this.$store.commit("addCount", 1); ,}}}; </script>Copy the code

So that’s the basic project setup.

2. Integrate your project Ganges sand into Vite.

2.1. JSX Issues

JSX syntax is available in field.js.

Option 1 (recommended) : add the following to viet.config.js:

esbuild: {
        jsxFactory: "h",
    },
Copy the code

JSX; add lang=” JSX “to script tag of vue file containing JSX syntax;

If you don’t want to use esbuild, you can do so in plugins

To:

That’s ok.

2.2. @path alias problem -resolve. Alias

Less variables and less issues -css.preprocessorOptions

2.4, Shen Lou extension problem -extensions

2.5. Agency problem. Server.

2.6, install brick, elementUI, elementUI font file (element-icons.woff,element-icons. TTF) no problem found.

A CSS that does not manually introduce Element will not find the font file

Start by introducing the elementUI CSS in main.js

import 'element-ui/lib/theme-chalk/index.css';
Copy the code

However, the standard project needs to use the brick style, so I will introduce the brick style below

import 'element-ui/lib/theme-chalk/index.css';
import '@heisea/brick/lib/style/theme/hsa/index.css';
Copy the code

2.7. Can’t find url of image with less variable (–image-path-base).

Find the following code in variable. less.

@--image-path-base: '~@/images';
Copy the code

Change ~@/–image–path-base in the old project

@--image-path-base: '@/images';
Copy the code

3 still use the original Webpack package

File names and script tags need to be modified after change, Webpack configuration.

1. Webpack babel-loader adds support for the JSX suffix.

Modify the test regular expression and resolve. Extensions of babel-loader in webpack.base.js, webpack.upms.base.js, and webpack.single.base Suffix JSX) as follows: