Develop backend system based on vue modularization - build project

This article shares with you the modular development backend system based on vue. Interested friends can take a look at this article.

The article directory is as follows:
Based on vue modular development backend System - preparation work
Based on vue modular development backend system-building project

Preface

After getting familiar with the preparation tools mentioned in the previous article, now Start building your own project. This is a VUE project. Then use vue-cli to build it. Enter the following command

vue init webpack xxxx

During the building process, because of the need to standardize the code as mentioned before, I asked this question in eslint , please reply Y. After everything is over, let's take a look at the directory structure

Project directory structure

Of course, some additions have been made to this directory, and remarks have been made (added) , the ones without remarks are the same

├── build                      // 构建相关  
├── config                     // 配置相关
├── dist                       // 打包之后相关
├── node_modules               // npm相关包
├── src                        // 代码
│   ├── api                    // 请求接口文件(加)
│   ├── assets                 // 静态资源(图片，样式等)
│   ├── components             // 全局公用组件
│   ├── directives             // 全局指令(加)
│   ├── mock                   // 项目mock 模拟数据(加)
│   ├── pages                  // 相关页面(加)
│   ├── router                 // 路由
│   ├── store                  // store管理(加)
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── .eslintignore              // eslint 忽略项
├── .eslintrc.js               // eslint 配置项
├── .postcssrc.js              // postcss 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json

Analyze these first, if you don’t see the node_modules folder, don’t worry about it for now, then look down and add api,directives,mock,pages,storeThese folders have their respective functions

1. api:Interface for storing project simulation

2. directives: Storage global directives of the project

3. ##mock:Storage usagemock.jsSimulated data

4. pages：Storage project-related pages

5. store： Storage state management

After reading these, there is actually nothing interesting to see. These can be named whatever you like. Next, let’s talk about package.json

package.json

This is the file used by NPM to manage project packages.

Open this file and find the
devDependencies attribute, where we add the packages required by the project, for example:

1. "axios": "^0.17. 0",//Request tool

2. "js-cookie": "^2.2.0",//Cookie

3. "lodash" : "^4.17.4",//Function library

4. "mockjs": "^1.0.0",//Simulation data tool

5. "vuex": "^3.0.1",//State management tool

6. "vee-validate": "^2.0.0"//Form validation tool

If your file has been configured, then directly enter the following command

npm install --save-dev

When you enter like this, you will find that the download is very, very slow. Why? Because the package you downloaded may be from abroad, so~~We add

Taobao Mirror, as follows

npm install --save-dev --registry=http://registry.npm.taobao.org

Of course, if you add it one by one, I usually check the package first version, because sometimes some packages are beta versions, the command is as follows:

npm show 包名或者插件名称 versions --json

Then enter the following command:

npm install 包名或者插件名称@版本 --save-dev --registry=http://registry.npm.taobao.org

At this time we only need to drink a cup of tea and be quiet A handsome man or a beautiful girl is enough~~After the download is completed, you can see the

node_modules folder

Personal modification, for reference only

After completing the above steps, you still need to modify the configuration.

Modify port

First find the directory

config, then find the file index.js, open it and find ## For the configuration item of #dev, since the default port is 8080, in order to prevent port conflicts with other projects, find the port option and change it to your favorite port

The browser automatically opens the project after running

Find the

dev

configuration item as above, and then find autoOpenBrowser, the default isfalse, now changed to true.

Problems with loading resources after packaging

Due to the problem that pictures and styles do not appear after packaging, I don’t know if you have the same problem, so I have made the following modifications:

config

Find the file index.js in this directory, open the configuration item found in build, and add assetsPublicPath: './ 'Then find the file

utils.js

in the build directory, and then find the following code: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return ExtractTextPlugin.extract({     use: loaders,     fallback: 'vue-style-loader',   })</pre><div class="contentsignin">Copy after login</div></div> in the configuration item Add

publicPath: '../../'

Summary

This part is for reference only, if you can ignore it for now, it appears It is possible to look back at the same problem again and it will not hinder the construction of the project. Once the build is complete, let’s start coding!

Article

Developing a backend system based on vue modularization - preparation workDeveloping a backend system based on vue modularization-building a project

Related recommendations:

vue2.0 What should we pay attention to in axios cross-domain and rendering

How to implement inertial sliding & rebound Vue navigation bar on the mobile side

How to deal with refresh 404 after vue project is packaged

The above is the detailed content of Develop backend system based on vue modularization - build project. For more information, please follow other related articles on the PHP Chinese website!