新建vue cli4项目

当前日期2021年9月24日，前端发展很快，然而鉴于某些轮子还不支持vue3，所以此新建项目依然使用vue2版本。

1. vue cli4 安装见vue官网
2. 新建项目
   终端打开到项目文件夹，新建项目foo

vue create foo//foo是项目名称

3. 选择第三个手动挡

   
   image.png

4. 下箭头到Linter 按空格去掉烦人的linter，不去的话后面按照axios报错

   
   image.png

5. 按enter选择2.x

   
   image.png

6. 选择第一个，选第二个要严格遵守json格式，自由的灵魂当然选第一个

   
   image.png

7. 这个看你个人，随意，大写N，建议选N

   
   image.png
8. 安装vue-router

vue add router

9. 安装axios

vue add axios
// 这次版本main.js已经有了import './plugins/axios'，不需要自己导入引用。
// 直接在需要使用的地方this.axios({})

10. 解决开发环境跨越问题。这里要注意分清开发环境跨域和发布环境跨域，发布环境跨域要通过其他方式解决。

//页面
  mounted() {
    this.axios.get('/api').then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
  }
// 在根目录新建vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://m.baidu.com',
                ws: true,
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    '^/api': '/'
                }
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    }
}

11. 也可以使用vue ui管理项目
12. jweixin-module 通过vue ui安装，通过淘宝npm安装出错
13. 使用vant，其他ui有问题，vux报错
14. 使用vant注意不要忘了引入components名称

components: {
    [Button.name]: Button
  }

15. 使用微信jssdk，如果是复制别人封装好的方法，注意有的接口更改或者废弃

jweixin.config({
                     debug: true,
                     appId: res.data.appId,
                     timestamp: res.data.timestamp,
                     nonceStr: res.data.nonceStr,
                     signature: res.data.signature,
                     jsApiList: [
                         'updateAppMessageShareData',
                         'updateTimelineShareData',
                         'chooseImage',
                         'previewImage',
                         'uploadImage'
                     ]
                });