The framework is based on VUe3 + Vite2, with the configuration of Element-Plus + VUE-Router +sass+vuex. It will be improved in the future

1. Initialization

  1. In accordance with theThe official documentationThe steps I’m using hereviteTo build the project and locallynpmIf the version is 7+, run the commandnpm init vite@latest vue3-pc -- --template vueInitialize a project named vue3-PC
  2. npm iAs well asnpm run devYou can run the project as shown below:

2. Introduce the Element-Plus UI

  1. Install using the command lineelement-plus: cnpm i --save elemnt-plus;
  2. Introduced the globalelement-plus: to entermain.jsThe introduction ofelement-plusAccording to the official quoteelementthecssThe document reads:import 'element-plus/theme-chalk/lib/index.css', but the error, look atnode_modules, the discovery oftheme-chalkFolders are placed directly onelement-plusIn the directory, not in thelibIn the 
    import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
app.use(ElementPlus)

app.mount('#app')
Copy the code

    After following the introduction above, the page is available as follows:

    <template>
  <h1>{{ msg }}</h1>
  <el-button type="primary" @click="count++">count is: {{ count }}</el-button>
</template>
Copy the code

    After running, open the page to see the effect

  3. Test build: Runvite buildScript, successfully packaged generationdistFolder, go todistIn the usehsSimulation startup, startup success, as shown in the following figureIf you open the IP address, you can access it normally

Introduce SASS

  1. In turn, installationnode-sass: cnpm i node-sass --save-dev.sass: cnpm i sass --save-devIt was too slow to install one by one. I installed the last few at a time:cnpm i sass-loader style-loader style-resources-loader --save-dev
  2. After the previous installation is successful, use it partially on the pagescss 
    $text-color: purple;
.msg{
  color: $text-color;
}
Copy the code

    Run and see the effect on the page:

  3. Based on the above, global introduction is requiredscssStyle and define global variables inassetsCreate a new file, place the global style, and thenvite.config.jsThe introduction ofglobalExternal style 
    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/scss/variable.scss"; `}}},pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass'.patterns: []}},plugins: [
      vue(),

  ],
  build: {}})Copy the code

    variable.scssGlobal variables are defined in$color-primary: #28cccc; Use it directly on the pagecolor: $color-primary;The effect is as follows:

  4. After the above configuration is complete,buildThen run again, no problem
  5. In Step 3, if you want to use the @ alias when importing global SCSS files, you can also configure it as follows 
    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      The '@': path.resolve(__dirname, 'src'),
      'views': path.resolve(__dirname, 'src/views')}}})Copy the code

    After the alias is configured, restart the project.

  6. I saw something online that needs to be introduced separatelypathModule, very strange, I do not need to also successfully configure alias, first put a doubt, behind to follow up under ~

4. Introduce vue-Router

  1. CNPM I vue-router@next –save Install dependencies

  2. In the SRC directory, create a router folder to store routes and add the following code to index.js. At the same time, create the home page and login page

    import { createRouter, createWebHistory } from 'vue-router'
export default createRouter({
    history: createWebHistory(),
    routes: [{path: '/'.component: () = > import('views/index.vue')}, {path: '/login'.component: () = > import('views/login.vue')}]})Copy the code

  3. Import the route in the entry file main.js with the following code:

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'


const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')
Copy the code

  4. Add a
    tag to app. vue

  5. Reboot to see the effect

5. Introduce Vuex state tree management

  1. Install dependencies:cnpm i vuex@next --save.Click to jump to the official Vuex document
  2. vue3The correspondingVuexUpgrade to4.xVersion, also used in writingModular APIThe writing; The followingVuexExample, using the module with namespace, see detailsThe official documentation, Vuex also links to some cases on its website:Github example address;

The directory structure of the example is divided into two modulesmodulesIn theuserInfoThe module andcommonModule to set the namespace:namespaced: true, and the rest are written as followsVuex3.xThe same,index.jsThe introduction method is throughcreateStore({modules: {XXX}})To introduceIn 3.main.js, the code is as follows:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import store from './store/index'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')
Copy the code
  1. In the page file, his call method basically followsVuex3.xConsistent, but differentVue4.xAdditional calls to named modules;
    • If throughstoreTo get the status value, you need to be insetup(){}In thereturnCome out
    • To use a method in a module with a namespace, you need to pass in the module name as follows:mapMutationswithmapActionsBoth specify a module with a namespace by passing the first parameter;
    import { mapMutations, mapState } from 'vuex'
export default {
    setup () {

    },
    data() {
        return {
            title: 'Login page'}},computed: {
        ...mapState({
            userId: state= > state.userInfo.userId
        })
    },
    methods: {
        ...mapMutations('userInfo'['SET_USERID',])}}Copy the code
    • References to namespaced modules can also passcreateNameSpacedHelperstoCreate namespace-based helper functions, it returnsAn objectObject containingmapState‘mapMutations’ and other auxiliary functions
    import { createNamespacedHelpers } from 'vuex'
const { mapMutations, mapState } = createNamespacedHelpers('userInfo')
export default {
    setup () {

    },
    data() {
        return {
            title: 'Login page'}},computed: {
        ...mapState({
            userId: state= > state.userId
        })
    },
    methods: {
        ...mapMutations(['SET_USERID'])}}Copy the code
  2. You can see it when it runs

6. As for persistent storage, there is no configuration here. You can install this plug-in by yourselfvuex-persistedstate

Six, other configuration

Eslint (standard code format) and HUSKY (Submit automatic validation code format) will be added later, see the next article;