vue3.0处理跨域并设置baseurl，vue3.0脚手架文件解释，在Vue项目中使用Eslint+Prettier+Stylelint

 

1、vue.config.js

    devServer: {
        disableHostCheck: true,
        open: false, //浏览器自动打开页面
        port: 8080,//真机测试端口
        https: false,
        hotOnly: false, //热更新（webpack已实现了，这里false即可）
        //配置跨域
        proxy: {   
            '/api': {   //凡是请求的baseurl是/api或空的，都代理到这里来
                target: "https://xxx.com.cn/",  //需要访问的地址
                ws:true,
                changOrigin:true,               //是否跨域
                secure: true,                   //是否https接口
                pathRewrite:{
                   //'^/api': ''  //若baseurl是/api，则需要置换为空，不然会在URL上带api
                }
            }
        }
    },

2、封装的axios中（request.js）

3、路径管理文件

.env.development ：

VUE_APP_BASE_API=""

.env.production ：

VUE_APP_BASE_API="https://xxx.com.cn/"

最后测试虽然是localhost，但已代理

二、vue3.0各个文件结构

1、README.md

备注文件有语法：
# 一级标题
# 二级标题

```   代表接下来写的是代码
npm run serve
```

 2、package.json

此文件可配置项目名称、版本、运行命令
dependencies 设定的是项目里使用的依赖，
devDependencies //这里写的依赖是用于开发环境的，不发布到生产环境。

3、package.json和package-lock.json区别

package.json 只保存一级版本号，npm install会更新最新版

package-lock.json：能保存最小版本信息，插件地址等，防止npm install的时候自动更新到了更新版本。因为新版本有可能会更新老的api

4、babel.config.js

用于插件的按需引入配置

5、.gitignore

.gitignore 文件的作用就是告诉git,push的时候忽略指定的文件夹或者文件，
且要在首次上传前设置

 6、.env.development

此类文件名是固定的，按运行的环境加载，里面定义的属性必须以VUE_APP_开头
.env.development：开发环境
.env.production ：生产环境
.env ：所有环境都会执行，但会被上面两个覆盖

7、.babelrc文件

babel是降es6转义成浏览器能理解的es5语法。 如果项目中用了babel 转移，需要定义babel需要的插件和预设转码。

babel 一般可以配合 webpack 、 browserify 等打包工具一起使用，在打包编译的同时进行语法转义。

8、可视化创建vue项目脚手架

可视化页面创建的命令行：vue ui

命令行手动创建：vue create xxx

9、

打包后的index.html,里面的引入改为相对路径（./）引入就能双击打开

使用eslint和stylelint

1、在page.json中添加，安装eslint、stylelint
    "stylelint": "^13.7.2",
    "stylelint-config-sass-guidelines": "^7.1.0",
    "stylelint-webpack-plugin": "^2.1.0",
2、新建
.stylelintrc.yml文件：
extends: stylelint-config-sass-guidelines
rules:
  max-nesting-depth: null  //css层级不限制
  indentation: 4    //css缩进4格

.eslintrc.js文件：
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    indent: ['error', 4],   //设置缩进4空格
    'vue/html-indent': ['error', 4],  //设置html缩进4空格
  },

.prettierrc.yml文件：
    arrowParens: always
    bracketSpacing: true
    jsxBracketSameLine: false
    printWidth: 80
    semi: true
    singleQuote: true
    tabWidth: 4
    trailingComma: all
    useTabs: false

config.js中:
plugins: [
      new StyleLintPlugin({
        files: ['src/**/*.{vue,htm,html,css,sss,less,scss,sass}'],
      }),
    ],

设置代码片段

文件→首选项→用户片段→scss.json/vue.json
{
  "stylelint-disable-nenxt-lint": {
    "prefix": "sdnl",    //输入的快捷键
    "body": ["/* stylelint-disable-next-line $0 */"], //想要的代码段
    "description": "Log output to console"
  }
}

vscode全局修改为LF

https://segmentfault.com/a/1190000021803437
执行：后重新拉取代码
git config --global core.autocrlf false

在Vue项目中使用Eslint+Prettier+Stylelint步奏 

https://segmentfault.com/a/1190000020168436

https://segmentfault.com/a/1190000019905650