Vue.js安装教程(图解)
要想学好 Vue.js,首先要了解 Vue.js 的开发环境搭建和 Vue.js 项目的构建,下面将介绍 Vue.js 的两种构建方法,由于第一种方法使用范围较小,局限性较大,所以着重介绍第二种方法。
1. 直接引入 JS 文件第一种方法就是直接在 HTML 文件中引入,此种方法相对比较简单,直接使用 script 标签引入内容,此时的 Vue.js 会被注册为一个全局变量,直接使用即可。
首先了解一下 script 标签的 defer 和 async 属性,这两个属性会让 script 标签引入的文件异步加载,也就是与 DOM 元素同时加载,这样即使把 script 标签放在 head 中,也不会影响页面的加载速度。
但是在 async 属性下, script 标签引入的文件没有顺序,谁加载得快就先用谁。在 script 标签文件相互依赖的情况下,这种加载方式会直接导致报错。若使用 defer 属性,文件就会按照顺序依次加载,保证了文件的先后顺序,就不会出现上面的问题,所以这里推荐在 script 标签上添加defer属性,之后将 script 标签放在 head 中,与 DOM 元素同时加载。
新建 HTML 文件,代码如下:
!DOCTYPE html html head title Script标签引入Demo /title script defer src= https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js /script /head body h1 Script标签引入Demo /h1 script type= text/javascript //需要执行的JS语句 /script /body /html
script 标签中的内容可以是本地文件,也可以是一个内容分发网格(Content Delivery Network,CDN)的地址:
如果在线上开发,当服务器不够快,可以使用 CDN 链接提速,这里为了方便,直接使用 CDN 链接。
关于CDN链接,读者可自行查阅相关资料,供应商较多,可自行选择。
用户可以直接在 script 标签中编写 Vue.js 代码,十分方便,但是局限性较大:
所以,这种方式一般只用于做个 Demo 来演示简单的内容,大部分情况下,都会使用下面脚手架配置方法构建 Vue.js 项目。
2. 脚手架的配置这里的脚手架,其实与盖房子时用的脚手架类似,使用脚手架工具可以很方便地构建出项目的基本模型,并且有很多插件可以丰富我们的项目,省得去一个个安装。
例如项目里一般都会引入 Eslint 规范代码格式,引入 Babel 进行 ES6 语法转译,还会使用一个打包工具对项目进行打包,减小线上的大小。若是手动安装,则需要花费较多时间;使用脚手架,只需要简单的几步操作即可,省时省力。
Vue-CLI 是 Vue.js 官方推荐的脚手架工具,现在已经到 3.0 版本。至于 3.0 以前的版本,它的功能与其他脚手架工具差不多,但是到 3.0 版本,出现图形用户界面(Graphical User Interface,GUI),对于新手来说非常友好,下面就来了解 Vue-CLI 3.0 的简单使用方法。
首先配置本地环境。Node.js 必不可少,这是一个基于谷歌 V8 引擎的 JS 运行环境。简单来说,就是先要在这里执行项目代码,否则不能启动项目。Node 不管 macOS 系统还是 Windows 系统,依照官网的指示进行下载与安装即可。
Node.js 安装包自带 npm,无须独立安装。npm 是一个包含众多 JS 包的管理工具,通过 npm 命令可以安装很多 JS 插件,不管是安装在本地还是项目中,都是可以的。
下面使用 npm 安装 Vue-CLI 脚手架,打开命令行工具,输入以下命令:
npm install -g @vue/cli
其中,-g表示全局安装,指在本地任何地方打开命令行工具都可以调用这个安装包;@表示最新的版本。
npm 还有很多类似的命令,例如-S是安装到生成环境的依赖,-D是安装到开发环境的依赖,其余命令可以查阅相关资料。
Vue-CLI 3.0 有一个要求是,Node.js 版本最低是 8.9,这里安装最新的稳定版即可。
直接使用 npm 时,有些读者可能会感觉很慢,不用担心,可以使用 cnpm 来进行代替。cnpm 是淘宝的一个 npm 镜像,每 10 分钟和 npm 同步一次,不用担心插件的版本问题。
在命令行工具中执行如下命令:
npm install -g cnpm registry=https://registry.npm.taobao.org
全局安装 cnpm 即可,这样以后遇到 npm 命令时,可以直接使用 cnpm 替换。安装完成后,可以查看当前开发环境软件的各种版本,如图1所示。
![开发环境软件版本](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a832e88.gif)
图1:开发环境软件版本 3. 脚手架的使用
至此,开发环境的安装已经完成,接下来运行 Vue-CLI 的图形化界面,执行以下命令:
vue ui
命令行工具如图2所示,此时就可以通过浏览器访问http://localhost:8000打开 Vue-CLI 3.0 运行界面,如图3所示。
![Vue-CLI命令行工具](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a840b21.gif)
图2:Vue-CLI 命令行工具
图3:Vue-CLI 运行界面
单击 创建 按钮会出现图4所示的界面:
![Vue-CLI创建项目界面](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a860a5e.gif)
图4:Vue-CLI创建项目界面
选择一个合适的文件夹,如在桌面新建一个 VueDemo 文件夹。单击 在此创建新项目 按钮,运行 Vue-CLI 配置,如图5所示。
![Vue-CLI配置](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a879ab1.gif)
图5:Vue-CLI配置
首先配置 详情 界面,给项目起一个名字,如 HelloWorld;然后在 包管理器 中选择 npm,有经验的用户也可以选择 yarn;最后,选择 初始化git仓库(建议) 。如果代码只用在本地使用,就不用选择这一项。
接下来配置 预设 界面,因为 默认 配置无法进行自定义修改,我们这里不使用默认配置,而使用 手动 模式。
然后到 功能 界面选择需要的包,例如选择2个默认的包 Babel 和 Linter/Formatter:
乍一看这种选择默认包的操作跟 默认 配置一样,其实并不是,默认配置不可以使用配置项来修改 ESlint 的规则。使用 手动 预设可以在配置里选择 ESlint 中的 Airbnb 规则,这是 ESlint 中最严格的规则,可以最大化地规范代码格式。
有些读者可能不习惯用 ESlint,因为写起来比较麻烦,经常一个缩进、一个标点有问题就会报错。可这却是规范自身代码的必经之路,试想你看别人代码的时候,是有规范的代码看起来舒服,还是毫无章法可言的代码舒服呢?为了不给别人带来困扰,也为了提高编程水平,使用 ESlint 还是很有必要的。尤其对一些新手来说,ESlint 会强制性使用 ES6 代码规范,帮助熟悉 ES6。
单击 创建 按钮的时候,系统会提示是否保存预设,可以保存,也可以不保存,之后就是等待项目的创建与依赖的安装,安装完成后,项目结构如图6所示。
![项目结构图](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a88bafc.jpg)
图6:项目结构图
此时在命令行工具中进入项目文件夹,启动项目:
npm run serve
调用 Vue-CLI 3.0 的服务来启动服务,成功后,项目运行命令行工具如图7所示。
![项目运行命令行工具](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a89e773.gif)
图7:项目运行命令行工具
此处给了两个网址:
第二个是外网网址,别的用户可以通过访问这个网址来访问本地地址,对于多设备测试来说很方便。
此时访问 http://localhost:8080/ 就可以看到刚刚新建的项目,项目运行界面如图8所示。
![项目运行界面](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a8afb59.jpg)
图8:项目运行界面
项目刚刚生成时,只有 Vue-CLI 默认的一些样式,由此可见新建项目比较简单,使用 GUI 之后,界面会更加清晰,现在看一下 Vue-CLI 平台,如图9所示。
![Vue-CLI项目详情](http://ytso-blog-oss-img.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2021/07/20/20210720_60f642a8c7642.gif)
图9: Vue-CLI 项目详情
Vue-CLI 带来了当前项目的分析功能,首先就是安装包的状态,之后还有项目依赖和项目配置等功能,不仅看上去十分炫酷,而且用起来也非常方便。Vue-CLI 还可以用来查看项目状态,对包进行一些管理操作。同时整个项目是热加载的,修改项目内容后,无须重启,网页会自动刷新。
至此完成了使用官方自带脚手架工具 Vue-CLI 创建新项目的整个过程,Vue-CLI 还有很多功能没有介绍,读者可以自行深入体验,绝对会给你带来不一样的感受。
23749.html
htmljavaJavaScript相关文章
- vue filters过滤器的统一封装「建议收藏」
- 基于VUE + Echarts 实现可视化数据大屏展示效果[通俗易懂]
- Vue.js框架中权衡的艺术
- vue 键盘事件keyup/keydoen
- 使用 vue 创建你的第一个 PWA 应用
- vue 打包部署
- vue源码分析-响应式系统(三)
- 【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元
- vue和jQuery一起使用「建议收藏」
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue关闭eslint检查_vue关闭eslint
- vue项目引入外部原生js文件_php引入文件的四个方法
- Vue调试工具安装(vue devtools)
- 初识vue.js模板语法
- 利用 JS 实现 Redis 的连接(js连接redis)
- Redis中的订阅机制及其在JS中的应用(redis 订阅 js)