安装

Vue3安装免费看

本节学习Vue3的安装,Vue3有多种安装方式,包括直接在页面上以 CDN package 的形式导入、使用 npm 命令安装、使用官方的 CLI 来构建一个项目等。

2020-12-07侠课岛    基础入门       

前端/前端/Vue3入门基础 11     0     791

本节我们来学习 Vue3 的安装。Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。官网中给出了多种安装 Vue3 的方式。但是并不推荐新手直接使用 vue-cli,尤其是在还不熟悉基于 Node.js 的构建工具时。

Vue的开发工具

我们知道在 Vue2 有一个叫做 vue-devtool 的开发工具,这个工具可以看到到组件的各种属性、事件的触发。所以在开发时推荐在浏览器中安装这个工具。

  • 获取 Chrome Extension。
  • 获取 Firefox 插件。
  • 获取标准的 Electron app。

手动安装vue-devtool

除了直接 chrome 商店安装,在也可以选择手动安装。

第一步:找到 vue-devtoolsgithub 项目,并将其 clone 到本地。(注意,一定要 clone 主干 master 的代码,因为进去可能是分支 dev,切换到 master上再 clone)。

git clone https://github.com/vuejs/vue-devtools.git

第二步:安装项目所需要的 npm 包。

npm install //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install

第三步:编译项目文件。

npm run build

第四步:添加至 chrome 浏览器。

游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序...”按钮,选择 `vue-devtools>shells` 下的 `chrome` 文件夹。
// 如果看不见“加载已解压的扩展程序...”按钮,则需要勾选“开发者模式”。

安装之后我们通过按下 F12 键 ,来查看是否安装成功,如下图所示:

Vue的安装

Vue.js 添加到项目中有三种主要方式:

  • 在页面上以 CDN package 的形式导入。
  • 使用 npm 安装它。
  • 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如热重载、保存时的提示等等)。

CDN

如果我们在某些情况下,只需要学习,不想使用 Vue 自带的脚手架搭建项目,则只需要引入下面的链接,我们就可以使用 Vue3.0 的各种 API

<script src="https://unpkg.com/vue@next"></script>

对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。

npm

在用 Vue 构建大型应用时推荐使用 npm 的安装方法。NPM 能很好地和诸如 WebpackBrowserify 等模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

要使用 npm,前提是已经安装好了 node,安装好 node 后,自然会自带 npm

下面是安装 Vue3.0npm 命令:

# 最新稳定版
$ npm install vue@next

命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

对于 Vue3,应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli@next。要升级,你应该需要全局重新安装最新版本的 @vue/cli

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

然后在 Vue 项目运行:

vue upgrade --next

Vite构建工具

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。

通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。

使用 npm

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者 yarn

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

如何升级vue-cli

要升级 vue-cli,首先我们需要使用以下命令卸载 vue-cli

npm uninstall @vue/cli -g

然后再重新安装一次即可:

npm install @vue/cli -g

我们可以通过 vue --version 命令来查看 Vue 的版本,如下图所示:

创建项目

我们在指定目录中创建一个 vue_three 的文件夹,然后在命令行工具中运行如下命令:

$ npm init vite-app my_vue

如下图所示:

然后初始化完项目,通过命令 cd my_vue 进入到项目里面,然后再执行 npm install 安装依赖:

依赖安装完成后,可以通过 npm run dev 启动项目:

然后就可以通过 http://localhost:3000 来访问项目了,在浏览器中打开如下图所示:

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

11

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引

本文标签


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?