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: