Complete development process of vue3 project

1、 Development process mind map

Development process mind map

2、 Preliminary preparation

1. Install nodejs

1）Nodejs download address, download and install

2) Confirm that node. Is installed JS, you can enter (node – V and NPM – V) in CMD. If the publication number is displayed, the installation is successful

image.png

2. Build Vue project (Vue CLI and vite, 1 out of 2)

1) Build the first Vue cli project

NPM install - G @ Vue / cli // install Vue cli globally
# OR
yarn global add @vue/cli

Vue -- version // view version
Vue create Hello World // create a project

Create project process

Project documents

Official documents:https://cli.vuejs.org/zh/guide/installation.html
The Vue, Vue router and vuex installed by default are not the latest versions, so they need to be uninstalled and reinstalled manually

2) Build the first vite project

npm init [email protected]

Create project process

Project documents

Official documents:https://cn.vitejs.dev

3、 Start project

1、vue-cli

npm run serve

2、vite

NPM install // installation dependency
NPM run dev // start the project

4、 Install common dependencies

npm install  [email protected] //The latest version of Vue v3 x
npm install vue- [email protected] //The latest version of Vue router v4 x
npm install  [email protected] --Save // the latest version of vuex v4 x
NPM install Axios // promise based HTTP Library
NPM install element plus // based on the latest version of Vue 3 X PC UI framework
npm install ant-design- [email protected] //Based on the latest version of Vue 3 X PC UI framework
npm install  [email protected] //Based on the latest version of Vue 3 X mobile UI framework
NPM install loadsh // JavaScript Utility Library
NPM install immutable // data processing tool
NPM install dayjs // time and date library
NPM install QRcode // QR code generator
NPM install charts // visual chart Library
NPM install GSAP // animation library
NPM install xlsx file Saver // export table
NPM install mockjs // generate random data and intercept Ajax requests
NPM install eslint -- save dev // assembleable JavaScript and JSX checking tool
NPM install sass sass loader // CSS extension language
NPM install vuedraggable // based on sortable JS implementation of Vue drag plug-in
NPM install sortablejs // drag Library
NPM install screenfull // full screen
NPM install nprogress // load the progress bar
NPM install jszip // create, read and edit Zip file
NPM install JS Cookie // cookie access
npm install fuse. JS // fuzzy search
NPM install dropzone // provides an open source class library for dragging and uploading files and previewing pictures
npm install driver. JS // page step-by-step guidance
NPM install core JS // Polyfill of JavaScript standard library (gasket / patch)
NPM install codemirror // a multifunctional text editor implemented by the browser
NPM install clipboard // copy text to clipboard

vue v3.x：https://v3.cn.vuejs.org
vue-router v4.x：https://next.router.vuejs.org/zh/installation.html
vuex v4.x：https://next.vuex.vuejs.org/zh/index.html
element-plus：https://element-plus.gitee.io/zh-CN
ant-design-vue：https://next.antdv.com/docs/vue/getting-started-cn
vant：https://youzan.github.io/vant/v3/#/zh-CN
lodash：https://www.lodashjs.com
immutable：https://immutable-js.com
dayjs：https://dayjs.gitee.io/zh-CN
echarts：https://echarts.apache.org/zh/index.html
gsap：https://greensock.com/gsap
mockjs：http://mockjs.com
sass：https://www.sass.hk

5、 Detailed explanation of project catalogue and specifications of various documents

1. Front end development specification document:https://www.jianshu.com/p/f9900596d50b

2. Detailed explanation of project catalogue

Detailed explanation of project catalogue

6、 Project essential knowledge

1、HTML

HTML5：https://www.runoob.com/html/html5-intro.html

2、JavaScript

ES6 Getting Started tutorial:https://es6.ruanyifeng.com/

3、CSS

Flex layout:https://www.jianshu.com/p/acfbb1b7d0f6

4、Vue

Vue3 official documents:https://v3.cn.vuejs.org/api

7、 Project development

1. Docking with designers: PS, blue lake, pxcode, 2345 picture King

2. Code management tools GIT and SVN

1) Git common commands

Initialize warehouse: git init
Remote pull item: git clone address
Status: git status
Add: git add
Submit: git commit - M ""
Push: git push
View remote warehouse: git remote - V
Push to master: git push origin master
Create a new branch (Branch Name: DEV): git checkout - B dev
Merge new branches into master: git checkout master git margin dev git push origin master
Delete branch: git branch - D dev
Remote delete branch: git push origin: dev
Return to the previous version: git reset -- hard head^
View log: git log or git reflog

Open git bash, configure the user name and email address, and enter the command
git config --global user. Name "user name"
git config --global user. Email "mailbox"

Git tutorial:https://www.liaoxuefeng.com/wiki/896043488029600

3. Development tool vscode

1) Install extensions: vetur, volar, prettier, eslint

2）settings. JSON configuration

{
  //Use vscode icons theme
  "workbench.iconTheme": "vscode-icons",
  //Repair the code according to the format every time you save it
  // "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //By default, prettier is used to format supported files
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      //No semicolon at the end
      "semi": false,
      //More than 140 characters wrap
      "printWidth": 140,
      //Use single quotes
      "singleQuote": true,
      //No trailing comma
      "trailingComma": "none",
      //Single argument of arrow function without semicolon
      "arrowParens": "avoid"
    },
    "prettyhtml": {
      "printWidth": 140
    }
  },
  //Ditto: prettier formatting code
  "prettier.semi": false,
  "prettier.printWidth": 140,
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  //Specifies the format of wxml
  "minapp-vscode.wxmlFormatter": "prettyHtml",
  "minapp-vscode.disableAutoConfig": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "eslint.trace.server": null
}

4. Vue router, vuex, Axios and mockjs

1）vue-router

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }，
  {// set 404 page
    path: '/:catchAll(.*)',
    name: '404',
    component: () => import('@/views/404.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

In main JS

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'

createApp(App).use(store).use(router).mount('#app')

In Vue config. Add @ corresponding mapping in JS

'use strict'

const port = process.env.port || process.env.npm_config_port || 9527 // dev port

const path = require('path')
const name = 'my-vue-demos' // page title

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js')
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

In vite config. Add @ corresponding mapping in JS

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': Resolve (_dirname, "SRC") // set alias
    }
  },
  server: {
    host: 'localhost',
    port: 8080,
    open: true,
  },
})

vue-router v4. X Official Documents:https://next.router.vuejs.org/zh/guide

2）vuex

Under the store folder, create index JS and write

import { createStore } from 'vuex'
import user from '@/store/modules/user'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

Create a new modules folder under the store folder and a new user JS, write:

const state = {
  count: 0
}

const mutations = {
   increment (state) {
      state.count++
    }
}

const actions = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}

Use in pages:

<template>
  <div>
    < div > get the store value counts for the first time: {{counts}} < / div >
    < div > dynamically get the store value count: {{count}} < / div >
    < button @ Click = "increment" > Click me + 1 < / button >
  </div>
</template>

<script>
import { useStore } from "vuex";
import { reactive, toRefs, computed } from 'vue';

export default {
  name: 'Home',
  components: {
  },
  setup() {
    const store = useStore()
    let data = reactive({
      counts: store.state.user.count
    })
    const increment = () => {
      store.commit('user/increment')
    }
    const count = computed(() => {
      return store.state.user.count
    })

    return {
      ...toRefs(data),
      increment,
      count
    }
  }
}
</script>

vuex v4. X Official Documents:https://next.vuex.vuejs.org/zh

3）axios

Axios package under Vue:https://www.jianshu.com/p/729d439d3fc0

4）mock

Method 1. Use fastmock
fastmock：https://fastmock.site/#
mockjs：http://mockjs.com