Vue简介
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架。
Vue 的目标在于简化Web开发。
Vue自身只聚焦于视图层,因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue也完全有能力地驱动复杂的单页应用。
Vue安装方式
有三种方式:独立版本、CDN方法、NPM方法
推荐使用最后一种,在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用,同时 Vue 也提供配套工具来开发单文件组件。
1、独立版本
可以在 Vue.js 的官网上直接下载 vue.min.js 并用
2、CDN方法
对于制作原型或学习,可以这样使用最新版本:
对于生产环境,官网推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
3、NPM(推荐)
在开始安装之前,我们需要了解什么是node.js、npm、cnpm和vue-cli
- Node.js 是运行在服务端的 JavaScript,是一个基于Chrome V8引擎的JavaScript运行环境。
- npm(node package manager):nodejs的包管理器,用于node插件管理,例如安装、卸载、管理依赖等。
- cnpm:因为npm使用的是国外的服务器下载,网络很不稳,会出现异常,淘宝团队就将npm官网的插件都同步到了在中国的服务器,这样可以让我们从这个服务器上稳定下载资源。
- vue-cli是一个基于 Vue.js 进行快速开发的完整系统, cli是Command-Line Interface,即命令行界面,也叫脚手架。 vue cli 是vue.js官方发布的一个vue.js项目的脚手架。 使用vue-cli可以快速搭建vue开发环境和对应的webpack配置。
npm安装
1、安装node
官网下载一个版本,
不推荐最新版,我自己是在node中文网下载的14.18.1版本
http://nodejs.cn/
下载完成之后,一直下一步:
安装好之后可以win+R 查看一下:
输入
node -v
查看一下node版本
2、安装vue-cli
安装好node,我们就可以来安装vue-cli,在这里我们有三种方式:
第一种方式:用npm安装:
npm install -g @vue/cli
第二种方式:cnpm安装:
先下载淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后用cnpm安装vue-cli
cnpm install -g @vue/cli
第三种方式:(推荐)用yarn安装:
- yarn是经过重新设计的npm客户端,于2016年10月发布,相比于npm,yarn在运行速度上有显著的提升,安装时间变少,功能上也有很多改进。
先安装yarn
npm install -g yarn
就可以使用yarn下载vue-cli了
拓展:可以再将yarn设置为淘宝镜像,这样速度更快:
yarn config set registry https://registry.npm.taobao.org
3、创建vue项目
安装好vue-cli了,接下来就可以创建项目啦。
自己定义项目名,不可使用驼峰式命名)
vue create project-name
回车之后会被提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
我一般选择的就是默认的
安装完成后
cd firstvue
进入之后启动项目就可以了,使用npm或者yarn都可:
npm run serve
yarn serve
复制网址打开即可: