vue最新版本

一、vue版本情况
vue最新版本：2.6

vue-cli:最新4.x

vue-devtools:5.3.3

vue-cli官网：https://cli.vuejs.org/zh/
安装vue-cli

npm install -g @vue/cli
创建项目

vue create 项目名
或
vue ui
查看vue脚手架的版本：vue -V
具体创建项目步骤：

第一步：vue create 项目名，然后按照步骤去执行

? Please pick a preset:
❯ default (babel, eslint) //回车自动安装脚手架需要的各种包
Manually select features //手动安装，需要自己配置选择各种要安装的包
第二步：安装好后进入项目目录并运行

$ cd 项目目录
$ yarn serve 或npm run serve //运行
vue-cli 3.x+通过vue.config.js来实现脚手架的环境配置（vue.config.js需要手动创建）

配置跨域选项：

module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘’,
ws: true,
changeOrigin: true
},
‘/foo’: {
target: ‘<other_url>’
}
}
}
}
手机上测试项目

要保证手机和电脑在同一个wifi环境下
运行项目：npm run serve
查找到项目所在电脑的ip地址：
App running at:

• Local: http://localhost:9999/
• Network: http://192.168.4.162:9999/ //手机上可以访问的
  手机端开发：如何做适配

前端主流适配方案：rem【推荐】,vw,vh,flex布局,百分比，媒体查询

rem适配方案：
1.https://github.com/amfe/lib-flexible
2.通过rem.js文件来动态设置

全局样式

reset.css
官方地址：https://meyerweb.com/eric/tools/css/reset/
工程目录？

https://lq782655835.github.io/blogs/team-standard/recommend-vue-project-structure.html

sass在window上的安装问题

等待安装。。。

解决方案：
npm install -g --production windows-build-tools

我这里解决的还要一种就是安装脚手架时不先安装sass
配置好项目在安装低版本的sass

然后再创建vue项目

vue create 项目名
Eslint 代码检验

Eslint官网：https://eslint.org/

Eslint中文文档：https://cn.eslint.org/

Eslint报错举例：

/Users/haojinli/Desktop/testvuepro/src/main.js
6:1 error Expected space or tab after ‘//’ in comment spaced-comment
9:1 error Expected space or tab after ‘//’ in comment spaced-comment
10:1 error Expected space or tab after ‘//’ in comment spaced-comment

✖ 3 problems (3 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the --fix option.
解决方案：
手动解决错误

报错信息中包括：报错的文件路径，报错文件的行号/列号，报错信息，报错规则

通过vs code解析错误：通过在vs code安装Es-lint插件来修复格式错误

通过Eslint --fix来修复

通过配置规则解决错误