什么是Vue.js
Vue
是一套用于构建用户界面的渐进式JavaScript
框架。与其他大型框架不同的是,vue被设计为自底向上逐层应用。Vue
的核心库只关注视图层。
Vue
是典型的MVVM模型的框架。
Vue
不支持 IE8以下版本,因为Vue使用了IE8无法模拟的ECMAScript 5
特性。
Vue
环境配置
Vue
安装
直接用<script>引入
- 下载Vue对应的版本,通过
<script>
进行引入; - 不下载Vue对应的版本,通过
CDN
访问对应的vue版本地址,通过<script>
进行引入;
引入方式大体如下:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
注:如果是下载对应版本的Vue,引入的话,把src
中换成项目中对应的地址即可。
通过NPM安装
NPM
是个什么鬼?
NPM
其实就是NodeJS
的包管理工具,能够解决NodeJS
代码部署上的很多问题。常见的使用场景有以下几种:
- 通过NPM服务器下载别人编写好的第三方包到本地
- 通过NPM服务器下载并安装别人编写好的命令行程序到本地
- 将自己编写好的包或者命令行程序上传到NPM服务器供别人使用
这里废话了一堆,其实就是见到介绍一下npm
,然后告诉你,要想用npm
就电脑里需要有安装过NodeJS
。
关于NPM常用的命令,后面补一篇专项的。
NodeJS
安装步骤
- 判断电脑里面有没有安装过
NodeJS
;
<!--简单粗暴,命令行看node的版本-->
node -d
- 如果安装了,直接跳过以下步骤;
- 打开NodeJS的官网,下载NodeJS的安装包,然后一通Next操作;
- 再次使用步骤1里面的命令,查看版本号,如果出现版本号,说明安装正常,如果木有,那就是需要配置NodeJS的环境变量(
windows
的NodeJS
安装过程中的Custom Setup里面有一个Add to Path
默认是选中的,不修改的话,基本不需要配置环境变了,如果你想玩的话,自己找某度,搜索怎么配置环境变量);
NPM
安装Vue
NPM
安装Vue
一般有两种方式,其实是NPM
安装就两种方式,一种是本地安装,一种是全局安装
本地安装Vue
- 把安装包放到
npm
命令所在的目录的/node_modules
中,如果没有这个目录的话,会在执行npm命令时生成这个目录; - 本地安装的包通过
require()
来引入本地安装的包;
本地安装命令如下(二选一即可):
<!-- 本地安装 -->
npm install Vue
npm i Vue
全局安装Vue
- 将安装包放在 /usr/local 下或者你 node 的安装目录;
- 可以直接在命令行里使用;
全局安装命令如下(二选一即可):
<!-- 全局安装 -->
npm install Vue -g
npm install -g Vue
注意:本地安装和全局安装,在命令上就区别在-g
,而且-g
可以写在Module Name的前面或者后面,实现的效果是一样的。
NPM
删除安装包
不赘述了,有安装就有删除,额外送个删除的命令;
<!-- 全局删除 -->
npm uninstall -g <Module Name>
npm uni -g <Module Name>
npm uninstall <Module Name> -g
npm uni <Module Name> -g
<!-- 本地删除 -->
npm uninstall <Module Name>
npm uni <Module Name>
通过脚手架安装使用
Vue提供了一个官方的CLI
,即Vue-ClI
,简单点聊就是通过npm
安装Vue-CLI
来使用Vue
。
Vue-CLI
简单介绍
Vue-CLI
是前端常说的Vue脚手架,通过脚手架可以快速搭建一个网页项目。
- 通过
@vue/cli
实现的交互式的项目脚手架。- 通过
@vue/cli
+@vue/cli-service-global
实现的零配置原型开发。- 一个运行时依赖
(@vue/cli-service)
,该依赖:
- 可升级;
- 基于webpack构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中- 最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装Vue-CLI
<!--安装Vue-CLI 3.0以前的版本-->
npm install -g vue-cli
<!--安装Vue-CLI 3.0以后(包含3.0)的版本-->
npm install -g @vue/cli
特别注意:
Vue-CLI以3.0为界限,包名是不同的,一个是 vue-cli
,一个是 @vue/cli
。
一般安装脚手架都是全局安装,它也不影响你不使用脚手架来进行实际开发。
安装指定版本的Vue-CLI
有些时候我们想安装制定版本的脚手架,所以我额外送几条npm
命令。
<!--查看Vue脚手架在3.0之前的npm版本-->
npm view vue-cli versions --json
<!--查看Vue脚手架2.6.0版本-->
npm install -g vue-cli@2.6.0
<!--查看Vue脚手架在3.0之后的npm版本-->
npm view @vue/cli versions --json
<!--查看Vue脚手架3.6.0版本-->
npm install -g @vue/cli@3.6.0
网友评论