Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3　Vue.js安装

Vue.js不支持IE 8及以下版本，因为Vue.js使用了IE 8不能模拟的ECMAScript 5特性。Vue.js支持所有兼容ECMAScript 5的浏览器。本节介绍三种安装方法：

·使用CDN方法。

·下载官方Vue.js框架。

·NPM方法。

1.3.1　使用CDN方法

下面推荐比较稳定的几个CDN，目前还是建议下载到本地（断网情况下本地也可以使用）。

·Staticfile CDN（国内）：https://cdn.staticfile.org/vue/2.2.2/vue.min.js，加载如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue入门实战讲解-黄菊华老师</title>
<!--加载Staticfile CDN提供的vue.js框架-->    
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
  }
})
</script>

</body>
</html>

·unpkg：https://unpkg.com/vue/dist/vue.js，会保持和NPM发布的最新版本一致，加载如下。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

·cdnjs：https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，加载如下。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js "></script>

1.3.2　下载官方Vue.js框架

我们可以在Vue.js的官网上直接下载vue.min.js，并用<script>标签引入。下载地址为https://vuejs.org/js/vue.min.js。本书提供的源代码里面也包含了该Vue.js文件。

1.3.3　NPM方法

由于NPM安装速度慢，本书使用了淘宝的镜像及其命令cnpm。

NPM版本需要大于3.0，如果低于此版本，则需要将它升级，代码如下：

# 查看版本
$ npm -v
6.13.4

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

在用Vue.js构建大型应用时推荐使用NPM安装：

# 最新稳定版
$ cnpm install vue

命令行工具

Vue.js提供了官方命令行工具，可用于快速搭建大型单页应用，示例代码如下：

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认按Enter键即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问http://localhost:8080/，输出结果如图1-17所示。

注意　Vue.js不支持IE 8及其以下IE版本。

图1-17　默认安装初始化页面

上一章目录下一章