vue-cli使用介绍

Vue-cli使用介绍

一 ，介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 经过 @vue/cli 实现的交互式的项目脚手架。

• 经过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

• 一个运行时依赖 (

  @vue/cli-service

  )，该依赖：

  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 能够经过项目内的配置文件进行配置；
  • 能够经过插件进行扩展。

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。

• 一套彻底图形化的建立和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各类构建工具可以基于智能的默认配置便可平稳衔接，这样你能够专一在撰写应用上，而没必要花好几天去纠结配置的问题。与此同时，它也为每一个工具提供了调整配置的灵活性，无需 eject。

二，安装

2.1关于旧版本

Vue CLI 的包名称由 vue-cli 改为了 @vue/cli。 若是你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你须要先经过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

2.2Node 版本要求

Vue CLI 4.x 须要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你能够使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

能够使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装以后，你就能够在命令行中访问 vue 命令。你能够经过简单运行 vue，看看是否展现出了一份全部可用命令的帮助信息，来验证它是否安装成功。

你还能够用这个命令来检查其版本是否正确：

vue --version

2.3升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

2.4项目依赖

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是今后处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级全部的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

三，建立项目

3.1vue create

运行如下命令来建立一个新项目：（这里是vue-cli3）

vue create hello-world

• 警告

若是你在 Windows 上经过 minTTY 使用 Git Bash，交互提示符并不工做。你必须经过 winpty vue.cmd create hello-world 启动这个命令。不过，若是你仍想使用 vue create hello-world，则能够经过在 ~/.bashrc 文件中添加如下行来为命令添加别名。 alias vue='winpty vue.cmd' 你须要从新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

你会被提示选取一个 preset。你能够选默认的包含了基本的 Babel + ESLint 设置的 preset，也能够选“手动选择特性”来选取须要的特性。

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

若是你决定手动选择特性，在操做提示的最后你能够选择将已选项保存为一个未来可复用的 preset。咱们会在下一个章节讨论 preset 和插件。

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。若是你想要修改被保存的 preset / 选项，能够编辑这个文件。

在项目建立的过程当中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

vue create 命令有一些可选项，你能够经过运行如下命令进行探索：

vue create --help
用法：create [options] <app-name>

建立一个由 `vue-cli-service` 提供支持的新项目


选项：

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理建立项目
  -b, --bare                      建立项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

3.2使用图形化界面

你也能够经过 vue ui 命令以图形化界面建立和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目建立的流程。

3.3拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆盖了。若是你仍然须要使用旧版本的 vue init 功能，你能够全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

四，联系方式

• qq：2061302791
• 微信：xie2061302791
• 电话：15284524485
• 我的网站：https://xieyingpeng.github.io/
• Github：https://github.com/xieyingpeng/
• 博客园：https://www.cnblogs.com/Xieyingpengz
• 知乎：https://www.zhihu.com/people/nan-qiao-12-73
• gitee：https://gitee.com/xie-yingpeng/project-1.git
• bilibili：https://space.bilibili.com/617198338?share_medium=android&share_source=copy_link&bbid=XY2BDF522C748A159BE7DD354D6DFFB963728&ts=161252011