Vue3 project construction, out of the box

Framework and tools used in this project: Vite2 + vue3 + VUE-Router4 + vuex4 + TS

1. Set up Vite + Vue project

Vite requires node.js version >= 12.0.0.

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# if you use ts:
npm init @vitejs/app my-vue-app --template vue-ts

# NPM 7+ requires additional double lines:
npm init @vitejs/app my-vue-app -- --template vue
Copy the code

• npm -vView the NPM version

2. Configure routes

npm install vue-router@4 --save
Copy the code

• insrcCreate a router folder in the directoryindex.tsRouting configuration file:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// Use the lazy route loading mode again
const Home = () = > import(".. /src/components/Home/Index.vue");
const Detail = () = > import(".. /src/components/Detail/Index.vue");
const notFound = () = > import(".. /src/components/notFound.vue");
const routes: Array<RouteRecordRaw> = [
  {
    path: "/".name: "Home".meta: {
      title: "Home page"
    },
    component: Home
  },
  {
    path: "/detail".name: "Detail".meta: {
      title: "Details Page"
    },
    component: Detail
  },
  {
    // The path cannot be used directly with the * wildcard of vue-Router3. x
    // Vue-router4. x will match everything and place it under '$route.params.pathMatch'
    path: "/:pathMatch(.*)*".name: "notFound".meta: { title: "404" },
    component: notFound
  }
]
const router = createRouter({
  history: createWebHistory(), // Use the most comfortable H5 history mode
  routes // 'routes: routes
});
export default router;
Copy the code

• inmain.tsIn:

// Create and mount the root instance to enable routing throughout the application
import { createApp } from 'vue'
import App from './App.vue'
import router from ".. /router/index";

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

• inApp.vueEntry component:

<template>
	<div>
    <! -- Use the 'router-view' tag to match the home page -->
    <router-view></router-view>
	</div>
</template>
Copy the code

3. Configure vuEX status management mode + library

# installation vuex4. X
npm install vuex@next --save
Copy the code

• Similar to the router, the router is created in the SRC directorystoreFolder and create a new oneindex.tsFile:

// Let's review the five core concepts of VuEX in one step
import { createStore } from "vuex";
const moduleA = {
  state: () = > ({
    count: 0.list: [{ id: 1.name: "nick".age: "18".isShow: true }, { id: 2.name: "mack".age: "19".isShow: false}}),getters: {
    formatList(state:any) {
      return state.list.filter((v: { isShow: any; }) = > v.isShow)
    }
  },
  mutations: {
    increment(state:any, data:any) {
      console.log(state, data) state.count = data.amount; }},actions: {
    incrementAsync(store:any, data:any) {
      setTimeout(() = > {
        store.commit('increment', data)
      }, 2000); }}}const store = createStore({
  modules: {
    a: moduleA
  }
})
export default store
Copy the code

• androuterThe same,main.tsIn:

import store from ".. /store/index";
createApp(App).use(store).mount('#app')
// This gives you global access to the store repository
$store.state.a.ount = this.$store.state.a.ount = this.$store.state.a.ount
Copy the code

Note that Vuex does not provide a type declaration for this.$store property out of the box. Since we are using TS in our project, we need to declare a custom module supplement first.

So create a new vuex.d.ts file in the SRC directory:

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // Declare your store state
  interface State {
    // Since we used vuex's module above, we can just declare the module name
    a: any
  }

  // Provide a type declaration for 'this.$store'
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}
Copy the code

4. Configure environment variables

Similar to vue-cli 4.x, we need to create.env.dev,.env.test and.env.prod files in the same directory as package.json to distinguish between development, test and formal environments. Then add the base_URL value to the corresponding file; For example, in the.env.prod file:

NODE_ENV=prod
VITE_APP_BASE_API = "api.prod.com"
Copy the code

Environment variable information is available anywhere in the project via import.meta.env; Of course, the purpose of environment differentiation is to automatically package different environments, so in package.json file:

"scripts": {
  "dev": "vite --mode dev"."test": "vite build --mode test"."build": "vite build --mode prod"."serve": "vite preview"
},
Copy the code

For example, to open a package in the test environment, run the NPM run test.

5. Improve development efficiency, clear DOM structure, of course, CSS preprocessor, the corresponding preprocessor dependency itself must be installed

#.scss and.sass
npm install -D sass
Copy the code

• If I have a separate introduction.scss..sass..less..styl 和 .stylusFile, or just used in vUE single file components:

<style lang="scss" scoped>
.home-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.btn {
		margin-top: 2rem; }}</style>
Copy the code

Because this is written out of the box, so many things are based on the actual business, there is no comprehensive, write will be very specific, targeted, there will be a follow-up supplement, the level is limited if you have any questions, please correct, thank you

Use your brother’s rich little hands and hit “like.”