本文讲述如何搭建vue2项目

开始

node -v
  v16.17.1

vue -V
  @vue/cli 4.5.15

创建项目
vue create vue-wap

进入文件夹、启动、打包
cd vue-wap
npm run serve
npm run build

axios

npm install axios
npm install qs

跨域配置 proxy

vant

npm install vant@2.5.2
npm install amfe-flexible@2.2.1
npm install postcss-pxtorem@5.1.1

// vue.config.js 像素适配 宽度px转换成rem; vant-375
css: {
  loaderOptions: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ['*']
        })
      ]
    }
  }
},

其他依赖

npm install less@3.13.1 less-loader@5.0.0
npm install vue-router@3.5.3
npm install vuex@3.6.2
npm install vue-lazyload@1.2.3
npm install vue-video-player@5.0.2
npm install swiper@7.4.1
npm install echarts@4.9.0

main.js

import Vue from 'vue'
import App from './App.vue'
import 'amfe-flexible'; // px适配
import Vant from 'vant';
import 'vant/lib/index.css';
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
import VideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
Vue.config.productionTip = false

Vue.use(Vant);
Vue.use(VideoPlayer);

new Vue({
  render: h => h(App),
}).$mount('#app')

package.json

{
  "name": "vue-wap",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service --open serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "amfe-flexible": "^2.2.1",
    "axios": "^1.3.4",
    "core-js": "^3.6.5",
    "echarts": "^4.9.0",
    "less": "^4.1.3",
    "less-loader": "5",
    "postcss-pxtorem": "5.1.1",
    "qs": "^6.11.1",
    "swiper": "7",
    "vant": "^2.5.2",
    "vue": "^2.6.11",
    "vue-lazyload": "^3.0.0-rc.2",
    "vue-router": "3",
    "vue-video-player": "5",
    "vuex": "3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }
}

vue.config.js

module.exports = {
  // 公共文件目录
  publicPath: './',
  // 关闭eslint
  lintOnSave: false,
  // 跨域配置
  devServer: {
    proxy: {
      "/api": {
          target: "http://localhost:3000",
          pathRewrite: {
            '^/api': ''
          }
      },
    },
  },
  // 像素适配 宽度px转换成rem; vant-375
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
              rootValue: 37.5,
              propList: ['*']
          })
        ]
      }
    },
  },
}