第六节 Vue脚手架之安装vue/cli并创建项目

亮子 2021-06-09 08:08:21 17947 0 0 0

1、安装与升级

vue cli对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。同时,CLI 还支持图形化界面来配置项目,可以非常方便地通过配套的图形化界面创建、开发和管理你的项目。

(1)安装

安装vue cli只需要在dos窗口中,使用如下命令:

# 安装vue/cli
npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

图片alt

(2)升级

如果已经安装,但是需要升级版本,可以使用下面的命令来进行升级:

npm update -g @vue/cli

2、创建项目

vue cli安装完成后就可以使用vue这个命令来创建项目了,具体的命令如下:

# 命令行模式
vue create my-project

# OR 通过界面模式
vue ui

上面的命令已经提供了命令行和界面两种方式来创建项目。

命令行模式创建项目,你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset。也可以选“手动选择特性”来选取需要的特性。

图片alt

这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

如果项目已经创建完成了,但是还想安装一个新的插件,可以通过vue add来安装,具体命令如下:

vue add eslint

3、运行项目

项目创建完成,或者你克隆下来一个项目,第一步需要安装项目所需的插件,运行如下命令:

npm install

在等待一段时间以后,会提示插件安装成功,这个时候,就可以使用npm run来运行工程了。具体命令如下:

npm run serve

图片alt

这样在本地访问http://localhost:8080即可以访问了。

4、编译发布项目

如果项目开发完成,需要线上部署,这时候就需要使用npm build命令来编译项目,编译后的项目在dist目录里面。具体的命令如下:

npm run build

图片alt

5、修改运行选项

如果项想修改运行选项,可以修改根目录下的package.json文件。

  • 允许调试
"no-debugger": "off"
  • 设置日志输出
"no-console": "off"
  • 去掉变量未用的警告错误
"no-unused-vars": "off"

以上选项放到eslintConfig的rules数组中,具体如下:

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-debugger": "off",
      "no-console": "off",
      "no-unused-vars": "off"
    }
  }