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

 

Logo

前往低代码交流专区

更多推荐