Installation environment

In the article, there are many pictures, which occupy a certain space. Some guys who write in the background say how to write Vue and how to build a new Vue project. Then I think it's necessary to write a Vue tutorial for backstage students. The article hardly talks about the details of css and vue, so as to reduce the amount of unnecessary information and the cost of learning vue. If there is something unclear, you can contact me by private trust. There is something unreasonable, please point out! I am smart!

1. Installing the nodejs environment

• Download address: (nodejs)[ https://nodejs.org/zh-cn/down...]
• Installation (omitted)

2. Install vue-cli tools

• npm install -g @vue/cli
• npm install -g @vue/cli-service-global

3. vue create hello-world// initialize hello-world project with vue

3.1 vue create hello-world

3.2 Running project npm run serve

Many back-end students use the editor idea, I also use idea to demonstrate this here, details are not the focus of this article, you can see idea creates vue projects
Open the project just initialized)

Configuring startup scripts is much simpler than configuring java scripts

Start:

Access address

3.3 Item Catalogue Introduction:

• node_modules, project-dependent module packages, we need module packages will be downloaded to this directory, we do not need to pay attention to the development.
• public static file placement, put a large static file

• Source files for src projects

  • assets small static files
  • Components components, some common components, such as login boxes, input components, etc.
  • The root component of the APP.vue Vue project
  • The main entry file for the main.js project, where some basic js css requirements can be introduced
• package.json project dependency, introduction, basic configuration manifest file, we just need to see the scripts within the execution commands, such as service - > start, build - > build packaging
• Other project run profiles, negligible

Tips: You can understand the content above, but you don't need to go deep and continue to add page routing down.

4. Increase routing vue-router

4.1 Installation Route NPM install vue-router-S

Use

4.2 Create router.js under the project folder

4.3 Write code

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';

Vue.use(Router);

export default  new Router({
    mode:'history',
    routes: [
        {
            path: '/helloworld',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

4.4. Create a new page folder, under which are all pages. vue files.

4.5 Modify router.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
import Index from './page/index';
import List from './page/list';

Vue.use(Router);

export default  new Router({
    mode:'history',
    routes: [
        {
            path: '/helloworld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/index',
            name: 'Index',
            component: Index
        },
        {
            path: '/list',
            name: 'List',
            component: List
        },
    ]
})

Access Routing:

5. Add axios, http request library( https://www.kancloud.cn/yunye...

5.1 Install library axios, NPM install axios-S

5.2 Use

Take the list.vue file above as an example:

<template>
    <div>
        <h3>This is one list page</h3>
        <ul>

            <li>
                <router-link to="/index">Index</router-link>
            </li>
        </ul>

        <h3>Here are the following axios Request to data</h3>
        <ul v-if="userList.length">
            <li v-for="item in userList" :key="item.id">
                //Name: {{item.name}}
            </li>
        </ul>

        <ul v-if="!userList.length">
            loading....
        </ul>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        name: "Index",
        data(){
            return {
                userList: []
            }
        },
        created () {
            axios('http://localhost:4000/get/alluser')
                .then(res => {
                    this.userList = res.data.users;
                })
        }
    }
</script>
<style scoped>
    ul li {
        list-style: none;
        font-size: 16px;
    }
</style>

6. Add scaffolding configurable file vue.config.js

Setting up cross-domain interface, service ports started by vue-cli, etc.

module.exports = {
    devServer: {
        port: 8090,
        proxy: 'http://localhost:4000'
    }
}

7. Packaging projects

7.1 Execute the command npm run build

7.2 Construction Results

The dist folder is generated in the project directory, and the files under the folder are the static files we need.
We can just throw the packaged static file into the server, or we can deploy the static file with ngxix, index.html is the final entry file.

- 1. Supplementary, using third-party ui Libraries