零. 前言

    公司最近开发项目使用的是vue-cli 3.0版本开发,但是对于vue-cli 3.0版本一直没有研究过如何使用,公司使用配置:pug + ts + stylus + eslint;编辑器使用:vscode,使用起来简直不要太爽。

默认你已经安装了nodejs

一.安装vue-cli 3.0

1.安装:

npm install -g @vue/cli
  • -g: 全局安装 vue-cli

二.创建项目

1.创建vue-app项目:

vue create vue-app

2.项目配置:

在这里插入图片描述

  • 默认配置
  • 手动配置:babel ts 预编译 等等… 【选择这个】

以下是我选择的配置(可以直接按数字键1,2,3,4进行选择)

  • Babel:将ES6编译成ES5
  • TypeScript:JS超集,主要是类型检查
  • RouterVuex,路由和状态管理
  • Linter/ Formatter:代码检查工具
  • CSS Pre-processors:css预编译 (稍后会对这里进行配置)
  • Unit Testing:单元测试,开发过程中前端对代码进行自运行测试

Use class-style component syntax? (Y/n) y

是否使用Class风格装饰器?
即原本是:home = new Vue()创建vue实例
使用装饰器后:class home extends Vue{}


Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

使用Babel与TypeScript一起用于自动检测的填充? yes


Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面


在这里插入图片描述

使用什么css预编译器? 我选择的 stylus


在这里插入图片描述

  • tslint: typescript格式验证工具
  • eslint w...: 只进行报错提醒; 【选这个】
  • eslint + A...: 不严谨模式;
  • eslint + S...: 正常模式;
  • eslint + P...: 严格模式;

在这里插入图片描述
代码检查方式:我选择保存时检查


![在这里插入图片描述](https://img-blog.csdn.net/20181017222800822?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXdlbndlbjY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

单元测试工具,这里附上vue单元测试的链接,想了解的小伙伴戳这里 https://vue-test-utils.vuejs.org/zh/


在这里插入图片描述

vue-cli 一般来讲是将所有的依赖目录放在package.json文件里


Save this as a preset for future projects? (y/N) n

是否在以后的项目中使用以上配置?不


在这里插入图片描述

下载依赖的工具:使用 yarn,速度快。

到此为止,安装就完成了,可以等待安装成功。

三.使用

1.vscodeeslint配置,使代码能够在ctrl+s的时候自动格式化:
vue-app目录县新建文件夹.vscode文件,再在.vscode目录下新建settings.json,文件内容如下:

tips:此配置包含了.vue文件.styl文件typescript的代码缩进

{
  "editor.tabSize": 2,

  "prettier.printWidth": 160,
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,

  "[vue]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[stylus]": {
    "editor.formatOnSave": true
  },

  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,

  "languageStylus.useSeparator": false,

  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 160,
      "tabWidth": 2,
      "semi": false,
      "singleQuote": true,
    }
  }
}

  • 这样做:
    表示vscode在读取到vue-app项目是,回去查找.vscode下的settings.json配置并应用。必须禁用插件:eslint

2.使用pug

yarn add pug pug-plain-loader --dev
  • 使用yarn安装 pugpug-plain-loader;(没有yarn的自行百度安装
  • --dev:安装到开发环境
  • 使用:打开App.vue文件,将文件修改为下面这样既可。
<template lang="pug">
  #app
    #nav
      router-link(to="/") Home
      router-link(to="/about") About
    router-view
  </div>
</template>

四、常见的一些问题

0.其他一些eslint配置都可以在packge.json文件中的eslintConfig下的rules下配置

1.console.log(1)报错:
找到packge.json文件中的eslintConfig下的rules

  "no-console": "off"

参考文献:

安装
eslint配置

Logo

前往低代码交流专区

更多推荐