vue-cli 3.0安装和使用-白红宇

vue-cli 3.0安装和使用

阅读量：4308 次

发布时间：2019-06-06

本文共 2575 字，大约阅读时间需要 8 分钟。

零. 前言

公司最近开发项目使用的是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超集，主要是类型检查

Router和Vuex，路由和状态管理

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单元测试的链接，想了解的小伙伴戳这里

在这里插入图片描述

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

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

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

在这里插入图片描述

下载依赖的工具：使用 yarn，速度快。

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

三.使用

1.vscode的eslint配置，使代码能够在ctrl+s的时候自动格式化：

在vue-app目录县新建文件夹.vscode文件，再在.vscode目录下新建settings.json，文件内容如下：

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

{    "prettier.printWidth": 160,    "prettier.tabWidth": 2,    "prettier.semi": false,    "prettier.singleQuote": true,    "prettier.disableLanguages": [],    "editor.tabSize": 2,    "[vue]": {        "editor.formatOnSave": true    },    "[typescript]": {        "editor.formatOnSave": true,    },    "[stylus]": {        "editor.formatOnSave": true,    },    "stylusSupremacy.insertColons": false,    "stylusSupremacy.insertSemicolons": false,    "stylusSupremacy.insertBraces": false,    "languageStylus.useSeparator": false,}