The preparatory work

Environment dependency: Node.js; Vue official scaffolding: VUE – CLI;

NPM is installed by default when nodeJS is installed. Vue-cli relies on NPM to install nodejs.

Background knowledge

Vue.js core framework

Webpack modular packaging tool, we chose WebPack as our module packaging tool when initializing the project using VUe-CLI

What is modularity? I recommend reading these two articles: Getting Started with JavaScript modularity I: Understanding Modules and getting Started with JavaScript Modularity II: Packaging modules to Build.

start

Initialize the project, select WebPack as the packaging tool, the project name is my-Project, and then follow the prompts to fill in some configuration, which will let you choose whether to use vue-Router (recommended); These configurations are eventually written to the project’s package.json and the corresponding modules are installed

vue init webpack my-project
Copy the code

Next, use your familiar editor to open the project, with a directory structure that looks something like this



Build and Config directories: related configuration files packaged by WebPack

The SRC directory: where we finally write the business code

Static directory: I don’t know what I use it for

package.json

Package. json is the basic configuration file for the project. It can be found that many contents, such as name, author, description, etc. are the values we filled in when initializing the project; Dependencies and devDependencies are packages that the project depends on. You need to run NPM install to install the packages before running the project

npm installCopy the code

Then let’s focus on scripts

NPM allows you to define script commands using the scripts field in package.json files. Dev and start are used to start the local development environment, Lint is used for syntax verification, and build is used to package the final online code

{
  "name": "my-project"."version": "1.0.0"."description": "A Vue.js project"."author": "ideagay <[email protected]>"."private": true."scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"."start": "npm run dev"."lint": "eslint --ext .js,.vue src"."build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^ 2.5.2." "."vue-router": "^ 3.0.1." "
  },
  "devDependencies": {... },"engines": {
    "node": "> = 6.0.0"."npm": "> = 3.0.0"
  },
  "browserslist": [
    "1%" >."last 2 versions"."not ie <= 8"]}Copy the code


In order to unify the code style within the team, we usually choose some syntax verification plug-ins to achieve the uniform code style. Here we chose ESLint as our code checking plug-in. First of all we have to change eslint (syntax checking) related configuration, open the root directory. Eslintrc. Js, in the rules below to add a semicolon to the end of configuration, forced to add a semicolon at the end, the good habits; SRC = “SRC”; SRC = “SRC”; Other styles according to the custom of their own configuration.

"semi"A: [2,"always"
]Copy the code

Run the project and see what happens

Open the command line tool and execute the following command in the current directory. If all goes well, it will automatically open localhost:8080 in your browser

# Default port 8080
npm run dev

You can also specify a port
PORT=8090 npm run devCopy the code

Add business code

The SRC directory is where most of our business code is written, and you can refer to the following directory structure configuration

Assets JS, CSS, images and other resources directory

Components public component directory

Router vue-router Indicates the configuration directory

Views page component directory

The main entry of main.js program, where plug-ins such as toast, Loading, etc., can be written by yourself or used by a third party, such as Element UI

App. Vue root component

main.js

import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';

Vue.config.productionTip = false;

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});Copy the code

routing

Add home page configuration to router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/index';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});Copy the code

Network request

Network requests can be made using AXIos, with some encapsulation depending on the business

assets/js/api/ajax.js

import axios from 'axios';
var qs = require('qs');

var instance = axios.create({
   baseURL: 'http://xxx.com/',
   timeout: 20000,
   headers: {
      'Content-Type': 'application/x-www-form-urlencoded'}}); const ajax = (url, params) => {return new Promise((resolve, reject) => {
      instance({
         url: url,
         method: 'post',
         data: qs.stringify(params)
      }).then(res => {
         console.log(res);
         if (res.data.success === true) {
            resolve(res.data.data);
         } else{ throw res; } }).catch(err => { console.error(err); reject(err); }})});export default ajax;Copy the code

import Ajax from '@/assets/js/api/ajax.js';
Ajax(`/tui/search`, {
   'key': this.keyword
}).then(res => {
   console.log(res);
});
Copy the code

style

Use normalize.css to reset the base style, eliminating differences between browsers, and introduce it in the root component app.vue

<script>
import 'normalize.css';

export default {
   name: 'App'
}
</script>Copy the code

Now the framework required by general business has been basically built. Call it a day

Code address github.com/ideagay/vue…