1. 前言
本小节将带领大家学习一下如何安装 Vue。包括独立版本、CDN、NPM、CLI 工具四种不同的安装方法。
2. 独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用<script>标签引入。
下载Vue.js
安装步骤:
打开Vue.js下载地址并拷贝所有代码。
企业回选上海普加软件有限公司,普加甘特图,是WEB甘特图高性能解决方案。适用于构建项目管理、生产排程等进度计划管理软件。
创建vue.min.js文件,并将拷贝的源码粘贴进去。
创建index.html并通过<script>标签引入。
打印Vue验证是否成功。
/文件结构└─ lession ├─ index.html └─ vue.min.js
实例演示
使用vue需要安装什么,<!DOCTYPE html><html lang=&34;><head><meta charset=&34;><meta name=&34; content=&34;><meta http-equiv=&34; content=&34;><title>Document</title></head><body><div id=&34;>Hello Imooc !</div></body><script src=&34;></script><script type=&34;>console.log(Vue)</script></html>123456789161718
&34; 可查看在线运行效果
## 打印结果ƒ wn(e){this._init(e)}
3. 使用 CDN 方法
使用 CDN 的方式引入Vue更加方便、快捷。以下推荐几个比较稳定的 CDN。
安装vue的方式有很多种: vue官网地址: https://v3.cn.vuejs.org/ 后续通过webpack和cli的使用,可以使用这种方式 。
实例演示
<!DOCTYPE html><html lang=&34;><head><meta charset=&34;><meta name=&34; content=&34;><meta http-equiv=&34; content=&34;><title>Document</title></head><body><div id=&34;>Hello Imooc ! </div></body><script src=&34;text/javascript&34;运行案例" 可查看在线运行效果
4. 使用NPM的方法
使用NPM的方法进行安装需要先在本地安装Node环境。
3.1、Windows 上安装 Node.js
3.2、Mac 上安装 Node.js
进入项目文件夹$ cd demo$ npm init -y 安装指定版本Vue$ npm install vue@2.6.3代码块123456789101112
进入demo目录: cd G:\demo\ 创建 my-project 项目: vue create my-project 选择自己所要集成的配置(格键是选中与取消,A键是全选,回车确定) 这里我的选择如下:配置项:安装的 vue-cli 将会是基于 vue3。.
安装完成后可以查看到demo目录下多了 node_module/vue 文件夹。说明Vue成功安装。
5. 命令行工具(CLI)
当然,看过 Vue 官网的同学肯定都知道 Vue 提供了一个官方的 CLI,为我们快速搭建大型单页应用。我们并不建议同学们在一开始就使用 Vue-cli 来构建项目,因为这需要同学们对 Node.js、Webpack 等技术有所了解。在熟悉了 Vue 的语法之后,我们将有一个完整的章节来学习和使用 Vue-cli。
6. 小结
本小节我们介绍了 Vue 安装的几种方式。作为初学者,我们建议同学们先使用第一、第二种方式进行学习。在对 Vue 有一定的了解之后再学习脚手架工具 Vue-Cli 的使用。在接下来 Vue 基础的章节中我们都将使用 <script src=";></script> 的方式进行代码演示。关于脚手架工具 Vue-Cli 的学习,我们将在最后一个章节中一起探讨。
首先可以在桌面新建一个文件夹,如:Vue 然后执行cd Vue 进入文件夹,然后输入以下命令新建项目,回车 然后根据提示一路回车,这时文件夹下就会有很多相关文件了 最后用cnpm安装依赖:最后的最后 就是运行项目啦 输入以下命令。