vue2整体布局的创建

1.创建脚手架

2.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.1.检查是否安装成功

npm config get registry

3.安装依赖

npm i less@4.1.2

npm i less-loader@6.0.0

npm i vue-router@3.6.5

npm i vuex@3.6.2

npm i element-ui@2.15.13

npm i echarts@5.1.2

npm i js-cookie@3.0.1

npm i jsencrypt@3.3.2  // 数据的加密与解密

4.创建相对应的文件夹

5. 路由的配置

5.1 index.js

 5.2 main.js

 5.3 app.vue  路由出口

this.$router.push('/home')  // 可以后退
this.$router.replace('/home')  // 没有后退
this.$router.go(-1)
this.$router.back()
this.$router.go(1)

6.vuex

6.1 main.js

 6.2 index.js

 6.3 tab.js

 7. element-ui

8.vue.config.js的配置

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave:false,

  devServer: {

    host: '0.0.0.0',

    // https:true,

    port: 6103,

    client: {

      overlay: false,

      webSocketURL: 'ws://0.0.0.0:6103/ws',

    },

    headers: {

      'Access-Control-Allow-Origin': '*',

    }

  },

})