翻译:疯狂的技术宅
原文:https://blog.logrocket.com/getting-started-with-the-new-vue-cli-3-43bcbe1ae759
概要:本文将指导你快速上手 Vue CLI 3,包括最新的用户图形界面和即时原型制作功能的使用步骤。
介绍
尤雨溪( Evan You)发起并创建的 Vue JS ,是一个用于构建用户界面的非常先进的框架,在 GitHub 上拥有超过 121,000 star,代码贡献者也超过了 234 位 。它包含一个能够使开发人员专注于 Web 应用视图层的核心库,以及一个支持库的生态系统,可帮助你解决大型单页应用的复杂性问题。
几个月前Vue团队发布了 Vue CLI 3 。本文将指导你使用Vue CLI 3,包括新的图形界面和即时原型设计功能。
开始之前的准备
本文适用于使用 Vue JS 的中级前端开发人员,熟悉基本概念和安装过程。在开始使用 Vue CLI 3 之前,你应该具备以下条件。
你需要:
- Node.js 10.x 及以上。你可以通过在终端或命令提示符下执行
node -v
来验证是否符合要求 - 安装了 Node Package Manager 6.7 或更高版本 (NPM)
- 代码编辑器:强烈建议使用Visual Studio Code
- 在你的计算机上全局安装 Vue 最新版本
- 在你的计算机上安装 Vue CLI 3.0。安装之前请先卸载旧的 CLI 版本:
npm uninstall -g vue-cli
然后安装新的:
npm install -g @vue/cli
图形界面
Vue CLI 3 附带了一个 GUI 工具,它是终端命令的 Web 界面,适用于喜欢图形界面而不是命令行的人。你可以用这个工具创建项目、安装插件和依赖项,还可以用它运行服务或构建用于生产环境的程序。
本文分别介绍了使用 CLI 和 GUI 工具创建 Vue 项目,它还解决了目前只能用 CLI 工具进行的即时原型设计等其他工作。
开始一个新项目
有两种方法可以启动新的 Vue 项目:
- 使用用户图形界面
- 使用命令行
图形界面
用户图形界面技术使你通过 GUI 工具点击几次鼠标就可以创建一个新项目。
打开机器上的终端并运行以下GUI命令:
vue ui
它会自动打开浏览器并访问 http://localhost:8000/project/select 上的 GUI 工具。刚打开时看起来像这样:
要创建新项目,请单击 create 按钮,然后在同一界面中查看打开的文件管理器。浏览(项目)文件时,你会注意到先前创建的 Vue 项目上有 Vue 符号(表示它们是Vue项目)。选择要在其中创建新程序的文件夹,然后单击页面上的 create new project here按钮。这将带你完成两个简单的注册阶段。
- Details:你可以在此处选择项目的名称,选择 yarn 或 npm 包管理器。你还可以通过切换选项来覆盖文件夹的内容(如果已存在)。最后你可以决定是否要为项目创建一个 git 存储库,它还附带一个选项来供你选择初始的提交信息。
- Presets: Presets 是插件和配置的关联。选择功能后,你可以选择将其保存为预设,以便在以后的项目使用,而无需再次重新进行配置。有三类预设:默认预设仅包含 babel 和 eslint 插件以及 Vue 基本配置;自定义预设允许你选择自己的插件;远程预设允许你从远程 git 存储库中选择预设(是的,这是可以的)
几秒钟后,你将获得新项目创建通知,并在你的程序界面中打开项目的 dashboard。
命令行
在 CLI 命令的使用新语法中,要创建新项目,你只需在终端上运行此命令:
vue create vue-test
其中 Vue-test 是你要构建的程序的名称。此命令会导致一系列提示,这些提示将要求与 GUI 完全相同,不同的是它们会在终端中进行提示。当你回答所有提示并按照自己希望的方式配置应用程序时,CLI 会为你构建它。
安装插件
新的 CLI 构建过程是基于插件的。 Vue 中的功能甚至第三方功能都可以被标识为插件,新 CLI 使用插件来修改我们在任何时间点设置的项目的配置。它们基本上是依赖编辑 Webpack 配置的额外功能。
图形界面
项目的 dashboard 侧栏有五个图标,第二个图标用于插件。当你单击它时,你将看到在本文开头注册阶段安装的插件:eslint、babel 和 cli-service,它是安装插件时依赖的服务。
添加新插件很简单,单击 add plugin 按钮并显示插件列表,你可以用搜索栏进行搜索。如果你选择了一个像 Vuetify 这样的插件,将会看到一个 install 按钮,它会将插件安装到你的项目中,并自动对插件进行 Webpack 配置更改。
命令行
要直接使用 CLI 安装 Vuetify 插件,请切换到项目目录并使用 add 命令,如下所示:
vue add Vuetify
这会将 Vuetify 插件安装到你的 Vue 项目中,并修改插件将影响的所有文件。某些插件附带了导致其安装的后续提示。在我看来,我认为在新 CLI 中实现的插件概念受到了 Angular CLI 的启发。
安装依赖项
Vue 中的依赖关系由主 Vue 核心依赖关系和开发依赖关系构成。这些也可以通过 GUI 和 CLI 安装。
图形界面
项目 dashboard 侧边栏的第三个图标用于依赖项。主要部分有 Vue 和核心依赖关系,dev 依赖关系包括模板编译器、eslint dev 依赖关系等等。
如果要在项目中安装 Bootstrap 依赖,那么单击 install dependency 按钮,然后搜索 bootstrap 并单击 install。几秒钟后会通知你安装完毕。
命令行
要直接用 CLI 来安装 Bootstrap 依赖,请切换到项目目录并使用 install 命令,如下所示:
npm install bootstrap
运行任务
任务就像对我们的 Vue 项目执行自动命令,可以是在开发服务器上提供的服务,也可以用于构建生产环境下的程序或执行 linting。所有这些任务都可以通过 GUI 和 CLI 工具完成。
图形界面
项目 dashboard 侧栏上的最后一个图标用于任务。你可以看到界面中显示的以下任务:
- Serve:这会在 localhost 上的本地开发服务器中运行你的程序。它有一个非常直观的 dashboard,显示错误日志和消息、资源,模块和使用的依赖项。它有一个数据可视化分析器,只需单击 stop task 即可轻松终止任务
- Build:界面看起来与 Serve 非常相似,但它在 dist 文件夹中缩小并构建生产环境下的程序
- Lint:用你在创建应用程序时选择的 eslint 标准处理 linting
- Inspect:在你创建项目时隐式检查为应用程序设置的 Webpack 配置
命令行
要直接通过 CLI 运行这些任务,请使用以下语法:
- Serve
npm run serve
- Build
npm run build
- Lint
npm run lint
配置
你可以在配置选项卡中更改 Vue 项目的原始配置,这是项目 dashboard 侧栏上的第四个图标。
你可以更改目录位置和 dist 文件夹的位置以进行生产环境的发布。还可以将 CSS 设置更改为预处理器。
即时原型制作
你是否想创建单个 Vue 组件而不去创建整个项目呢?现在可以用名为 instant prototyping 的新 Vue CLI 功能来实现了,它抽象了在已保存的 .vue 文件上创建单个组件所需的所有配置。你所要做的就是在自己的机器上全局安装 Vue CLI 服务,可以这样做:
npm install -g @vue/cli-service-global
在安装了该服务后,你就可以在计算机上的任何位置创建单个 Vue 组件,其功能与完整的 Vue 项目相同。
创建单个Vue组件
打开你选择的文件夹并创建一个新文件,将其命名为 helloworld.vue,将下面的代码复制到文件中并保存:
// helloword.vue file
{{ msg }}
Installed CLI Plugins
Essential Links
Ecosystem
可以用以下命令在 dev 服务器上运行它:
vue serve helloWorld.vue
这会在本地主机上跑起一个 Vue 单个组件,就像完整项目一样。
结论
我们已经一步步的完成了使用新的 Vue CLI 3.0 以及附带的 GUI 工具的过程。在撰写本文时,GUI 工具还无法通过 GUI 工具的即时原型设计在单个组件上创建或运行任务,但可以在 CLI 上完成。我希望本指南能够对你有所有帮助,编码愉快!