兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。因此,在选型时一定要注意这一点。
环境搭建
Vue的环境搭建有两种方式,一种是直接使用script引入,另外一种就是使用npm的方式搭建
script引入
对于制作原型或学习,你可以这样使用最新版本:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
具体版本自行根据实际需求选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
npm安装
使用npm需要nodeJs的环境,首先安装nodeJS。
下载nodeJs安装程序
去nodeJs官网下载安装程序:
https://nodejs.org/en/download/
根据实际情况选择版本,此示例下的的为 Current Latest Features ->Windows Installer(.msi)
安装nodeJs
点击Next
选中“ I accept the terms in the License Agreement” 复选框
点击Next
可根据自己实际需求通过点击 Change按钮改变安装目录,然后点击Next
点击Next
点击Next
点击Install
点击Finish完成安装
在命令行中输入npm,出现如下信息则表示安装成功:
安装cnpm
npm install -g cnpm
安装vue脚手架
这里我们使用cnpm
cnpm install -global vue-cli
或
cnpm install -g vue-cli
使用 vue 脚手架创建一个基于webpack的新项目
Project name :为项目名称不可以有中文及大写字母;
Project description :为项目的描述信息;
Author :作者
Vue build :vue的编译环境
Install vue-router : 询问是否使用路由;
Use ESLint to lint your code?:询问是否使用ESLint,ESLint是一个代码检查工具,如是做测试不建议使用;
Set up unit tests :用于测试时使用;
Setup e2e tests with Nightwatch? : 同样是提供给测试人员使用的
Should we run npm install for you after the project has been create? 这里默认是使用npm进行安装,可以通过上下键来选择,本示例选择的是最后一项,“自行手工执行”
进入到项目目录,并使用cnpm安装:
cnpm install
运行项目
cnpm run dev
在浏览器上输入:http://localhost:8080 看到此页面则表示成功: