Toss after setting up (1) – build the environment

preface

I just entered my senior year this September, majoring in IT Japanese (major in Japanese, minor in IT).

In the last year of university, the goal of my graduation design was to make a SPA application related to Japanese.

Front end uses Vue whole family bucket, at present I am using shallow bottom son raw gnaw official document.

The back-end uses NodeJS express.

The reason why I started to update this series of articles is because I read this article => how can technical people improve themselves (recommended must-read) -IT Big Fly said

I will write down the places I find hard and nice to deepen my impression.

Development Environment Configuration

1. Find a template

In order to save the time cost of configuring various things, I have not learned webpack (strong behavior lazy excuses) for the time being.

So I went straight to a project template that was configured based on vue-CLI scaffolding and hot loaded on both ends.

Vue-loader, Vue-Router, vuex, axios have been configured.

Very convenient! Thanks to the author! Template => Github portal

Those who are interested in learning more can see this => get through the front and back end – build a Vue + Express development environment

2. Learn about the template directory

Explain the function of each part:

Therefore, during development, you can generally ignore the files in red:

Go to the SRC directory and familiarize yourself with the contents of the development folder:

One is the client folder, one is the server folder, expand the two folders

3. Install modules dependent on the project

The terminal goes to the project directory and executes NPM install

The system automatically installs modules required by the template to /node_modules based on the package.json file. This step takes a long time.

4. Configure the UI component library

import Vue from 'vue'
import App from './App'
import router from './router/index'
import store from './store/store'
import axios from 'axios'↓↓ import ElementUi from'element-ui'; // Component JS code import'element-ui/lib/theme-chalk/index.css'Vue. Use (ElementUi)// This sentence must be added otherwise Vue. Config.debug = cannot be usedtrue
Vue.config.productionTip = false
Vue.prototype.$axios = axios
new Vue({  
    el: '#app',  
    router: router,  
    store: store,  
    template: '<App/>',  
    components: { App }
})Copy the code