vue2, Vue3 scaffolding, interface encapsulation, proxy server configuration, vuex warehouse, request interceptor configuration.

Vue2 scaffolding construction project:

Create a vue project:

1, install vue command line module vue-cli globally

npm install vue-cli -g

Note: vue-cli depends on webpack, before using vue-cli, install webpack first

npm install webpack -g

2**, create a project folder, and open the command line under this folder**

**3, initialize a vue project**

vue init webpack

Note: The Eslint option is a code format verification tool, select NO, otherwise the code will be verified in strict mode,

For example: There must be one and only one space after the comment //, otherwise an error will be reported

4, Download and install all dependencies

npm install

5, start the project

npm run serve

In the root directory of the vue project, index.html is the home page of the project, and other files are various configuration files of the project.

The static folder is a static folder that stores static resource files (similar to public in express projects)

The src folder is the folder where the project source code is stored (similar to the bin in the express project), and all front-end code files are stored in src.

The build folder is used to store the configuration files packaged by the webpack project.

The config folder stores the configuration files of the server.

Except for the src folder, the contents of other folders basically do not need to be modified.

To develop a vue project, the main thing is to write code in src.

6. When the project is completed, how to package and publish it?

(1) Packaging: After the project development is completed, the code line executes the command

npm run build

Compile and rebuild the project, then generate a dist folder in the project directory

(2) Release: Just copy all the content in the dist folder to the static folder of the server (IIS/node/apache)

Summarize the creation and startup methods of several servers

1, the basic server npm init initializes node index start

2, express project generator express myProject initialize npm start start

3, vue1.x/2.x project framework vue init webpack initialization npm run dev start

4, vue3.x project framework vue create project-name initialize npm run serve start

5, react project framework create-react-app my-app initialization npm start start

6, Angular framework project ng new app-name initialization ng serve start

vue3 scaffolding project

1. Install @vue/cli scaffolding

npm install -g @vue/cli

After the installation is complete, you can use vue -V (this V is capitalized) to view the version number

Note: @vue/cli depends on webpack, install webpack before using

npm install webpack -g

2. Create a project

vue create project-name

The project-name here is a custom project name. After the command is executed, the corresponding folder will be generated

3. After the project is generated, the relevant dependencies have been automatically installed. At this time, the project can be started directly:

npm run serve

Fourth, after completing the above steps, the vue project can already be developed, but it cannot meet the customized development needs

At this time, you need to manually create a vue.config.js in the root directory

// vue.config.js

module.exports = {

  publicPath:'/',    // 启动页地址

  outputDir: 'dist', // 打包的目录

  lintOnSave: true, // 在保存时校验格式

    productionSourceMap: false, // 生产环境是否生成 SourceMap

    devServer: {

      open: true, // 启动服务后是否打开浏览器

      host: '0.0.0.0',

      port: 8080, // 服务端口

      https: false,

      hotOnly: false,

      proxy: null, // 设置代理

      before: app => {}

    },

}

Five, when the project is completed, how to package and release it?

(1) Packaging: After the project development is completed, the code line executes the command

npm run build

Compile and rebuild the project, then generate a dist folder in the project directory

(2) Release: Just copy all the content in the dist folder to the static folder of the server (IIS / node / apache) to refer to the document: https://www.cnblogs.com/wisewrong/p/9740173 .html

Request encapsulation (practice small dem).

// 导入请求插件
import axios from 'axios'


// 执行ajax-get请求的函数
function getRequest(url, params){
    return new Promise(resolve=>{
        axios.get(url,{params}).then(res=>{
            resolve(res.data)
        })
    })
}

// 执行ajax-post请求的函数
function postRequest(url, params){
    return new Promise(resolve=>{
        axios.post(url,params).then(res=>{
            resolve(res.data)
        })
    })
}

// 获取商品列表
function getGoodlist(params){
    return getRequest("/myApi/goodlist", params)
}
// 登录
function doLogin(params){
    return getRequest("/myApi/login", params)
}
// 注册
function doRegister(params){
    return getRequest("/myApi/register", params)
}
// 一级分类标题
function getTypeOneList(params){
    return getRequest("/myApi/getTypeOne", params)
}

// 搜索商品
function getSearch(params){
    return getRequest("/myApi/search", params)
}

// 获取商品详情
function getDetail(params){
    return getRequest("/myApi/detail", params)
}

// 同店相似商品推荐
function getSameGoods(params){
    return getRequest("/myApi/sameList", params)
}

// 获取购物车数据
function getCartList(params){
    return getRequest("/myApi/shopList", params)
}

// 购物车商品数量增加/添加购物车
function getCartAdd(params){
    return getRequest("/myApi/add", params)
}

// 购物车商品数量减小
function getCartRemove(params){
    return getRequest("/myApi/remove", params)
}

// 删除购物车商品
function getCartDelete(params){
    return getRequest("/myApi/del", params)
}

// 获取轮播图图片地址
function getBannerUrl(params){
    return getRequest("/myApi/banner", params)
}


// 把请求数据的函数导出
export {
    doLogin,
    doRegister,
    getGoodlist,
    getBannerUrl,
    getTypeOneList,
    getSearch,
    getDetail,
    getSameGoods,
    getCartList,
    getCartAdd,
    getCartRemove,
    getCartDelete
}

Request interceptor, vuex reference:

Vue Request Interceptor Configuration - Siege Lion Chaochao's Blog - CSDN Blog

Routing configuration reference:

Vue secondary routing configuration - Siege Lion Chaochao's Blog - CSDN Blog