1 Project initialization
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
Copy the codeAfter running the above commands, a VUe3.0 project is ready, in the following directory:
Then we will refer to the family bucket of vue2. X to fill the basic module of the project from zero:
Vite. Config. js(equivalent to vue.config.js) configures some service configurations and package configurations 2. Vex4.0 state management, managing global state 3. And request interception 5. Introduce the UI framework and set up some common theme configurationsCopy the code2 vite. Config. Js configuration
const path = require('path')
// vite.config.js # or vite.config.ts
module.exports = {
// Importing third-party configuration will move the imported third-party files to E: \gitcode\gitcode\ project directory \gitcode\ project directory \node_modules\gitcode\ project directory \node_modules\.vite_opt_cache
optimizeDeps: {
include: []},alias: {
// Keys must start and end with a slash
'/ @ /': path.resolve(__dirname, './src')},/ / the hostname: '0.0.0.0',
port: 8080.// Whether to open automatically in the browser
open: true.// Whether to enable HTTPS
https: false.// Server render
ssr: false./** * The basic public path when serving in production. *@default '/' * /
base: '/'./** * The directory associated with "root" where the build output will be placed. If the directory exists, it will be removed before the build. *@default 'dist'
*/
outDir: 'dist'.// Reverse proxy
proxy: {
'/api': {
target: 'https://blog.csdn.net/weixin_45292658'.changeOrigin: true.rewrite: path= > path.replace(/^\/api/.' ')}}}Copy the code3. Introduction of Vex4.x
- The installation
npm install vuex@next --save
Copy the code- Create a directory
- index.js
import { createStore } from 'vuex' import getters from './getters' import app from './modules/app' import user from /modules/user // createStore instance const store = createStore({modules: {app, user}, getters}) export default storeCopy the code- getters.js
const getters = {
projectTitle: state => state.app.projectTitle,
userName: state => state.user.userName,
userId: state => state.user.userId
}
export default getters
Copy the code- user.js
const user = {
state: {
userName: '',
userId: ''
},
// commit('user/setUserInfo')
mutations: {
setUserInfo (state, { userName, userId }) {
// `state` is the local module state
state.userName = userName
state.userId = userId
}
},
// dispatch('user/setUserInfo')
actions: {
setUserInfo ({ commit }, userInfo) {
commit('setUserInfo', userInfo)
}
}
}
export default user
Copy the code- main.js
import { createApp } from 'vue' import App from './App.vue' import './index.css' import store from '/@/store' // Vue2. X use store.dispatch('setUserInfo', {userName: 'foo ', userId: 12333 }) console.log(store.getters.userName) console.log(store.getters.userId) createApp(App) .use(store) .mount('#app')Copy the code- The usage vue3. X
<template> <h1>{{ msg }}</h1> <button @click="count++">count is: {{count}}</button> < button@click ="updateUserInfo"> <div> <p>userName: {{ userName }}</p> <p>userId: {{ userId }}</p> </div> </template> <script> import { useStore } from 'vuex' import { ref, computed } from 'vue' export default { name: 'HelloWorld', props: { msg: String }, Setup () {const store = useStore() let count = ref(0) // Get the default store values let userName = computed(() => Store.getters. UserName) let userId = computed(() => store.getters. UserId) // Update store data const resetUserInfo = () => {// Access a mutation store.com MIT ('setUserInfo', {userName: 'foo ', userId: 123 }) } const updateUserInfo = () => { // access an action store.dispatch('setUserInfo', { userName: 'admin', userId: 321 }) } return { count, userName, userId, resetUserInfo, updateUserInfo } } } </script>Copy the code4 the vue – introduced the router
- The installation
npm install vue-router@4
Copy the code- Create a directory
- index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import home from '/@/view/home/index.vue'
import login from '/@/view/login/index.vue'
const routes = [
{
path: '/home',
name: 'home',
component: home
},
{
path: '/login',
name: 'login',
component: login
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Copy the code- main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import store from '/@/store'
import router from './router'
createApp(App)
.use(store)
.use(router)
.mount('#app')
Copy the codeOf course, general projects will have nested routines and layout components, routing guard permission authentication is not outlined here!
- Axios introduced
- The installation
npm install axios --save
Copy the code- Create request.js to encapsulate the request
import axios from 'axios' import { ElMessage, ElMessageBox } from 'element-plus' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000}) service. Interceptors. Request. Use (config = > {/ / ToDo here for a token of the user login and set up the custom request header return config}, error => { Promise.reject(error) } ) service.interceptors.response.use( response => { const res = response.data if (res.code ! == 20000) { ElMessage({ message: res.message || 'Error', type: 'error', duration: 5 * 1000}) if (res. Code = = = 50008 | | res. Code = = = 50012 | | res. Code = = = 50014) {ElMessageBox. Confirm (' you have been published, {confirmButtonText: 'relogin ', cancelButtonText:' cancel ', type: {confirmButtonText: 'relogin ', cancelButtonText:' cancel ', type: 'warning' } ).then(() => { location.reload() }) } return Promise.reject(new Error(res.message || 'Error')) } else { return response.data } }, error => { ElMessage({ message: error.messa, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default serviceCopy the code- Create API directory, write API interface
import request from '.. /utils/request.js' export const loginApi = data => { return request({ url: '/api/bidingDetail/searchSingleBidingDetailApprove', method: 'post', data: data }) }Copy the code5. Introduce UI framework ElementUI-Plus
- The installation
npm install element-plus --save
Copy the code- Global references in main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import store from '/@/store'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App)
.use(ElementPlus)
.use(store)
.use(router)
.mount('#app')
Copy the code- Used in components
<template> <h3>this is home's page</h3> <HelloWorld MSG ="Hello Vue 3.0 + Vite" /> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label=" date" width="180"> </el-table-column> <el-table-column prop="name" label=" name" Width ="180"> </el-table-column> <el-table-column prop="address" label=" address" > </el-table-column> </el-table> </template> <script> import { reactive } from 'vue' import HelloWorld from '/@/components/HelloWorld.vue' export default { name: 'home', setup () {let tableData = reactive([{date: '2016-05-02', name: 'table ', address: Date: '2016-05-04', {date: '2016-05-01', name: '2016-05-01', name: '2016-05-01' 'Wang Xiaohu ', address:' 1519 Jinshajiang Road, Putuo District, Shanghai ', {date: '2016-05-03', name: 'Wang Xiaohu ', address: }]) return {tableData}}, components: {HelloWorld}} </script>Copy the code