vue-cli3.x创建项目

之前一直用vue-cli2.x创建项目,来学习一下3.x创建项目的流程

vue create 项目名   // 不支持大写字母

之后基本上一路enter就好,有需要选择的自己设置吧,这里要提一嘴,3.x创建项目会让选择路由模式(hash/history),提示是否选择history模式,输入y就是history,n就是hash模式,这个有不明白的去查一下吧(前面一篇有写到过)
创建完成后在VScode打开项目–>新建终端–>npm run serve
编译成功后安装依赖

一,vant组件的按需引入(完全按照官网上的要求来的,https://youzan.github.io/vant/#/zh-CN/quickstart)

安装vant组件库

npm i vant -S

引入组件我是想使用自动按需引入方式的,官方文档上说只需要安装一个插件就可以了
1 安装

npm i babel-plugin-import -D   // 安装

2 对于使用 babel7 的用户，可以在 babel.config.js 中配置

plugins: [
 ['import', {
   libraryName: 'vant',
   libraryDirectory: 'es',
   style: true
 }, 'vant']
]

但是安装完成后直接使用button组件,控制台报错,提示我没有注册该组件,这个很纳闷,最后在main.js里面引入button组件才不报错,根本原因还不知道(目前是用谁引入谁就好)

import "vant/lib/index.css";
import {Button} from 'vant';
Vue.use(Button)
// import {Button,popup} from 'vant';   // 多个直接用逗号隔开
// Vue.use(Button).use(popup);    //后面直接.use()就好

二,创建项目时貌似默认安装了eslint,保存编译时老是报警告,那就取消代码检测呗

解决方法:vue.config.js里面修改配置(只要这个文件里的代码动了就要重新编译)

module.exports = {
    lintOnSave: false    // 保存时检查语法格式
}

三,vue做移动端适配

如果手动把px转换成rem,势必降低效率,一不小心还会算错等等各种劣势。 不过不要灰心,我们可以借助px2rem插件,方便快捷的将px转换成rem。
1 安装插件

npm install px2rem-loader lib-flexible --save    

2 在入口文件main.js中引入lib-flexible

import "lib-flexible/flexible.js"   

3 vue.config.js里面修改配置

module.exports = {
    lintOnSave: false,   // 保存时检查语法格式
    chainWebpack: config => {
	    config.module.rule('css')
	    .test(/\.css$/)
	    .oneOf('vue')
	    .resourceQuery(/\?vue/)
	    .use('px2rem')
	    .loader('px2rem-loader')
	    .options({remUnit: 75})   
	}
}

4 重启项目
上面的方法是vue-cli3.x版本的解决方法,vue-cli2.x的解决方案参考以下链接吧,插件都一样,只是配置的位置不同:
https://blog.csdn.net/guanguan0_0/article/details/94649469?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

四 安装axios

1,安装

npm install axios --save

2 将axios添加到vue的原型链上,这样在页面上就可以直接用this.$axios了

Vue.prototype.$axios = axios;

3 设置baseUrl

axios.defaults.baseURL = "http://xxxxxx"

五 安装vconsole

有时候移动端需要在真机上测试,方便看输出内容,同pc端的控制台一样的作用
1 安装

npm install vconsole

2 在main.js里引入
这里要提一下,测试方便可以使用,正是上线发包时要将这两行注释掉

import VConsole from 'vconsole/dist/vconsole.min.js'
let vConsole = new VConsole() // 初始化

手机上会出现一个绿色的按钮,点开样就可以在手机上看到输出的内容了

六 前端代理服务器解决跨域问题

解决跨域之前以前都是要么后台设置,要么用nginx转的,今天我自己搭建了个项目,想用前端代理服务器试一下

'/api': {
    /* 目标代理服务器地址 */
    target: 'http://10.10.38.94:3000/',
    /* 允许跨域 */
    changeOrigin: true,
    pathRewrite: {
      '^/api' : ''
    }
}

参考链接如下,各个选项的配置讲的挺明白的:
https://www.cnblogs.com/itgezhu/p/13219326.html
这个只是在开发环境中处理的跨域问题,生产环境里还是需要在服务器上配置nginx反向代理(网上查出来的,没实际做过,想了解更多的话找百度吧)

七 遇到的意料之外的错误

解决办法:
在项目根目录下创建postcss.config.js，配置内容如下：即可修复报错问题.

module.exports = {  
  plugins: {  
    'autoprefixer': {browsers: 'last 5 version'}  
  }  
}

百度出来的原因：postcss.config.js是针对webpack3.0做的特殊处理
说是少了postcss.config.js,新建了就ok了,新建了文件但是我啥也没配置它就好了

今天就先到这吧,下班啦,之后继续补充

参考链接
https://blog.csdn.net/qq_41558265/article/details/104738787----适配