Vue project configuration and project first understanding

Vue project configuration and project first understanding

table of Contents

Vue project environment construction

node ~~ python: node is written in c++ to run js code
npm(cnpm) ~~ pip: npm is a terminal application store, you can change to domestic source cnpm
vue ~~ django: vue is used to build vue front-end projects

1) Install node
Download the installation package from the official website, fool-proof installation:

2) Change source to install cnpm
>: npm install -g cnpm --registry=

3) Install vue project scaffolding
>: cnpm install -g @vue/cli

Note: When 2 or 3 terminal installation fails, you can clear the npm cache and repeat the failed steps
npm cache clean --force

Vue project creation

1) Enter the directory where the project is stored
>: cd ***

2) Create project
>: vue create project name

3) Project initialization

4. Choose to manually create the project

babel: Parse the syntax of es6 into es5 syntax (we mainly use es5)

TypeScript, if you use native JS to write, you can not choose

Progressive Web App Support website optimization measures to improve search, project optimization

Router routing, need to be installed

Vuex global singleton, used for parameter transfer between components, can be installed, stored value feature resets all data when the browser is refreshed, mainly used for parameter transfer of mobile terminal components

css pre-processors CSS pre-compilation, less and sass syntax projects need to be used, and the corresponding compiler needs to be installed

Linter/Formatter format the code and standardize the format of the code. Optional, but an error will be reported if the writing is not standardized.

Press the space to select, enter the next step

5. Enter after selection

6. Select Y for this step

7. The above options will only appear after you select the format management, and enter after you select



Note: If the requirements of each project are different, it is best not to choose Y. Once you choose Y, it will be troublesome to change later.

Refactor project dependencies

1. Documents that need to be transferred

If we need to transfer the project to another configuration environment, we need to copy all the files under node_modules, or just copy the following three files. Be sure not to copy node_modules. There are tens of thousands of files in this folder. Copy And the upload speed will be particularly slow.

2. Refactoring dependencies

The above three folders must be present when rebuilding dependencies (node_modules).

cd to the folder corresponding to the project and execute cnmp install to load the dependencies. If you encounter an error, delete the code in the error part of the package file where the error is reported, so that the project can be loaded normally. We usually download it in GitHub If the project fails to run, it may also be a configuration file problem.


  1. Put the files to be transferred in an empty folder
  2. Cd to the target folder in cmd and execute the command directly: cnmp install
  3. Start project: cnpm run serve

If after migrating the project, the installation dependency error is reported as follows,

Find the corresponding route and modify it as follows

pycharm configures and starts the vue project

1. Open the vue project with pycharm

2. Add configuration npm startup

3. Configure npm to start

4. Install the plug-in needed to parse the .vue file, search for "vue", click install, and then click the restart software option

Click apply and then OK, the software will automatically restart and install the plug-in

Vue project directory structure analysis

├── v-proj
| ├── node_modules//All dependencies of the current project, generally cannot be ported to other computer environments
| ├── public          
| | ├── favicon.ico//label icon
| | └── index.html//The only page of the current project
| ├── src
| | ├── assets//static resources img, css, js
| | ├── components//small components
| | ├── views//page components
| | ├── App.vue//Root component
| | ├── main.js//Global script file (entry of the project)
| | ├── router
| | | └── index.js//routing script file (configure the mapping relationship between routing url links and page components)
| | └── store   
| | | └── index.js//Warehouse script file (vuex plug-in configuration file, data warehouse)
| ├──
└ └── configuration files such as package.json

vue component (.vue file)

# 1) template: There is one and only one root tag, responsible for the html structure of the component
# 2) script: The component object must be exported export default {}
# 3) style: The style tag has a clear scoped attribute, which means that the style only works inside the component (the componentization of the style)
# 4) export default{component content} component content is the logical processing part of the component
    <div class="test">

    export default {
        name: "Test"

<style scoped>


Global script file main.js (project entry)

The following two ways of writing are similar, but the second one is the one we used before. Previously, we defined that the sub-component and the root component are in the same file, which does not involve the import of files, but they are divided into files in the project, and need to import files

import Vue from'vue'
import App from'./App.vue'
import router from'./router'
import store from'./store'
//File import, import file name from'path', the file name is a proxy, which can be different from the real file name
Vue.config.productionTip = false

new Vue({
    render: h => h(App)
import Vue from'vue'//load vue environment
import App from'./App.vue'//Load the root component
import router from'./router'//Load the routing environment
import store from'./store'//Load the data warehouse environment

Vue.config.productionTip = false
new Vue({
    render: function (readFn) {
        return readFn(App);

Complete main.js

<!DOCTYPE html>
<html lang="zh">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Adapt to IE browser-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- Adapt to mobile terminal -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- Find the logo image (favicon.ico) under the root path -->
        Error reported when the browser does not support JS
<div id="app"></div><!-- The root component has its own template -->
<!-- There is only one page for the entire project -->

Vue request life cycle

  1. Start the project, load the main script main.js, load the Vue environment, create the root component to complete the rendering, load the existing third-party environments of the system: router, store, load the custom third-party environment and the environment configured by yourself.
  2. When the router is loaded, it will parse the index.js script file in the router folder to complete the routing-component relationship mapping.
  3. Create a new view component.vue (in the views folder), configure it in the route (in the index.js of the router), set the route jump (in the navigation bar component)''' browser request/user => router plugin Mapping User.vue component => User.vue component replaces the <router-view/> placeholder in App.vue Note: i) You can use <router-link to="/user">user page</router-link >Complete the label jump ii) this.$router.push('/user') complete the logic jump'''

Life cycle hooks of vue components

The life cycle hook is a callback method for many time nodes from creation to destruction of a component. These methods are all members of the vue component instance. The function of the life cycle hook is to meet the needs to be completed at different time nodes.

Consider the following code:

     beforeCreate() {
            console.log('Home component is about to be created');
        created() {//Important method: complete the background data request in this hook
            console.log('Home component was created successfully');
        beforeMount() {
            console.log('Home component is ready to load')
        mounted() {//A particularly time-consuming data request can be delayed until the component is initially loaded successfully, and then slowly request
    //Pictures that are not easy to load can be placed here, and then continue to load after the text is loaded
            console.log('Home component loading is complete')
        destroyed() {//Here can do some prompt messages when the page is closed, such as asking the user to confirm whether to close the page, etc.
            console.log('Home component destroyed successfully')

About routing

1. Routing configuration

We need to configure path, name and component (registered component)

import Vue from'vue'
import VueRouter from'vue-router'
import Home from'../views/Home.vue'
import Course from'../views/Course'
import CourseDetail from'../views/CourseDetail'


const routes = [
        path:'/',//This is equivalent to url, when the suffix of the path to be accessed is/, the home page is accessed
        name:'home',//The name here is equivalent to the alias from the reverse analysis
        component: Home
        path:'/home',//When the suffix of the accessed path is/home, redirect to the corresponding page of/
        redirect:'/',//route redirection
        name:'course',//Use of name: <router-link :to="{name:'course'}">course page</router-link>
        component: Course
       //The first routing parameter

       //The second type of routing parameter
       //: pk has a famous group, so that pk can receive the corresponding value
        component: CourseDetail

2. Route jump

this.$router.push('/')//Control the route to jump to the path in brackets,
//If you are already on this path and jump to this path again, an error will be reported

this.$route.path//Get the current path (the suffix is ​​not the full path)


require('@/assets/img/001.jpg'),//Load static resources in the foreground logic using require, here you get the full path of the image, @ is src
redirect:'path',//route redirection
this.$router.go(2);//go is the history record forward and backward, positive means forward, negative means backward, and the number is the number of steps forward and backward
<router-link to="/">Homepage</router-link>
<!-- A tag after encapsulation -->
<!-- Reverse analysis is used here, :to="the path to jump" -->

3. Routing parameters

method one

    <!--The first form of routing parameter/course/detail?pk=1-->
    <router-link :to="`/course/detail?pk=${}`">{{ course.title }}</router-link>
                    <!--Use the to attribute to bind to the sub-route, here use constants instead of variables -->
    <router-link :to="{
        query: {pk:}
    }">{{ course.title }}

Way two

<!--The second form of routing parameter/course/1/detail-->
<router-link :to="`/course/${}/detail`">{{ course.title }}</router-link>
Reference: Vue project configuration and project initial understanding-Cloud + Community-Tencent Cloud