vue本质是一个js脚本，提供了一个前端框架。在开发时，可以直接引入这个js脚本，也可以使用脚手架工具，在本地搭建一个项目。
Vue.js安装
方法一、在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
方法二、使用CDN方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<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>方法三、NPM方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
# 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g
在用 Vue.js 构建大型应用时推荐使用 cnpm 安装：
# 最新稳定版 $ cnpm install vue
上面三种方法都可以使用VUE.js，但是如果要开发应用，则需要利用脚手架创建项目。
vue-cli脚手架
本地搭建一个Vue的开发调试环境，即vue-cli。vue-cli基于webpack可以在本地提供一个测试用的Web服务器，同时还支持对开发的源码进行编译和打包操作。
安装nodejs
vue-cli运行在Node.js环境，所以首先需要安装的是Node.js。
Node.js安装并配置完成之后，可以通过如下命令来检查是否成功：
安装webpack
vue-cli依赖于webpack，因此需要提前通过npm工具来安装webpack库。具体命令如下：
npm install webpack webpack-cli -g
通过如下命令检查webpack是否安装成功：
安装vue-cli库
npm install vue-cli -g
通过如下命令来检查vue-cli是否安装成功：
创建项目
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
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也可以使用
npm i --registry=https://registry.npm.taobao.org
npm run dev
这是把安装依赖的库指定为淘宝镜像源获取。
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
项目目录结构
扫一扫
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
