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

本是古典何须时尚 2023-03-01 09:10 4阅读 0赞

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）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

3、路径管理文件

![20200723110334197.png][]

.env.development ：

VUE_APP_BASE_API=""

.env.production ：

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

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

![20200723110639899.png][]

二、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][Vue_Eslint_Prettier_Stylelint]步奏

https://segmentfault.com/a/1190000020168436
    
    https://segmentfault.com/a/1190000019905650

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20230209/b8a522f83b724294b0bff7a17485869f.png
[20200723110334197.png]: /images/20230209/eb68fd097b074cae9e6b7f56bdd82164.png
[20200723110639899.png]: /images/20230209/6de05558619747efa6c6f41b4f9c3198.png
[Vue_Eslint_Prettier_Stylelint]: https://segmentfault.com/a/1190000020168436