The use of Vue CLI front-end scaffolding

CLI view

1. Introduction

concept

Vue CLI is a complete system for rapid development based on Vue.js.

The page developed after using Vue scaffolding will be a complete system (project).

2. Installation

2.1 Environmental preparation

First download node.js, bring your own npm, perform mirror configuration and other operations to complete the configuration.

2.2 Installing the scaffold

# 卸载脚手架
npm uninstall -g @vue/cli  //卸载3.x版本脚手架
npm uninstall -g vue-cli  //卸载2.x版本脚手架

# 安装2.x版本的vue Cli
npm install -g vue-cli

2.3 Create a scaffolding project

1. Find the location where you want to place the scaffolding item and execute the vue init webpack 项目名command :

   

2. There will be an interactive prompt after executing the command, choose as follows:

   

3. Run successfully:

   

4. The scaffolding project created is as follows:

   

   Project structure description:

   vue-cli-first: 项目名
   	-build: 存放项目运行的脚本文件
   	-config: 整个项目的配置目录
   	-node_modules: 管理项目中使用的依赖
   	-src: 用来书写vue的源代码[重点]
   		-assets: 用来存放静态资源
   		-components: 用来书写Vue组件
   		-router: 用来配置项目中的路由
   		-App.vue: 项目根组件
   		-main.js: 项目主入口
   	-static: 其它静态资源
   	-.babelrc: 将es6语法转为es5运行
   	-.editorconfig: 项目编辑配置
   	-.gitignore: git版本控制忽略文件
   	-.postcssrc.js: 源码相关js
   	-index.html: 项目主页
   	-package.json: 类似pom.xml，依赖管理
   	-package-lock.json: 对package.json固定版本
   	-README.md: 项目说明文件
   

5. Run the project:

   Execute in package.jsonthe upper layer of (that is, in the directory of the created scaffolding project) npm run dev:

   

6. Access items:

   

Note: The development idea of ​​scaffolding is that everything is a component , that is, a component corresponds to a business function. By writing components (files ending in .vue), multiple components can be combined together and packaged into runnable through vue cli html file.

2.4 Development steps

1. Detailed explanation of main.js content (generally this file will not be modified):

   

2. App.vue Contents:

   Generally, a component is divided into three parts:

   

   That is to say, the project first accesses App.vue, executes the content in the template, and then uses the components defined by the Vue object in main.js, that is, the components introduced in index.js.

3. index.js content:

   

So directly running the project accesses the HelloWorld component.

Custom components:

1. Modify App.vue content:

   

2. Create a new component Home.vue:

   

3. Modify the index.js page:

   

4. operation result:

   

Therefore, in the future development, you need to use rout-linktags define the routing path (to access the content directly displayed by the project) , define the components ending in .vue under the components package, import the components in the index.js file, and declare the components.

For example, declare the routing path in App.vue:

Define the three components ending with .vue under the components package. After importing the components and declaring the components in the index.js file, the running results are as follows:

3. Using Axios in scaffolding

1. Install Axios

   npm install axios --save-dev

2. Introduce Axios into main.js and modify the internal $http

   import axios from 'axios';

   Vue.prototype.$http = axios;

3. send request

   get request:this.$http.get("url").then((res)=>{})

   post request:this.$http.post("url").then((res)=>{})

4. Scaffolding project packaging and deployment

4.1 Packaging static resources

1. Execute the command in the root directory of the project (the directory containing package.json)

   npm run build

   Note: The Vue project must be run on the server and cannot be run directly by double-clicking.

2. The dist directory appears after packaging

   

   This directory is the direct deployment directory.

3. Copy the dist directory to the following directory of the SpringBoot project:

   

4. Start the SpringBoot project and access the index.html page through the browser path

4.2 Nginx proxy static resources

1. Upload the packaged dist directory to a directory on the nginx server, for example: /opt/www/vue/dist

2. Then configure nginx, enter the nginx installation directory, and modify the nginx configuration file, such as:

   # vue-demo.conf
   location / {
       root   /opt/www/vue/dist;
       index  index.html index.htm;
   }