Vue 的安装

独立版本

独立版本也就是单独的 js 文件，你可以直接下载并使用 <script> 标签引用，Vue 会被注册为全局变量。

提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。

官方下载： https://cn.vuejs.org/v2/guide/installation.html

下载完成之后，新建一个 HTML 文件，我们就可以开始使用 Vue 了,别忘了在 <head> 内引入 Vue.js 喔

<div id="app">
  {{ message }}
</div>

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

打开浏览器的 JavaScript 控制台，并修改 app.message，你将看到上面渲染的例子相应地更新了。

NPM 安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。

对于实际项目开发来说，我们会利用官方的脚手架工具 vue-cli 来帮我们快速搭建 Vue 所需要的开发环境，鉴于我们之前已经讨论过了 Node.js 和 NPM 的相关内容，我们现在直接开始，执行以下命令：

npm install vue-cli -g

因为我们经常会使用到 vue-cli 所以我们选择全局安装，安装完了之后，我们 cd 进入一个我们事先准备好的目录，比如 demo 目录，然后执行 vue-cli 的初始化命令：

vue init `<项目模板名>` `<文件夹名>`

vue-cli 目前提供了 simple、webpack-simple、webpack、browserify、browserify-simple 模板，我们以 webpack-simple 为示例：

vue init webpack-simple

它会询问你是否在当前目录下创建项目，如果我们不想的话，就要在之前的命令后面加上文件夹的名字

然后你需要输入项目的名字、描述、作者以及是否使用 sass，我们暂时不需要 sass 所以不使用，前面几项你也可以选择跳过。

然后我们要运行项目的话，就必须安装项目所依赖的模块，所以像它给出的提醒一样，以此输入：

npm install
npm run dev

成功运行之后，你应该能在浏览器看到如下情况：

在命令行中按下 ctrl + c 可以结束程序运行

注意：目前这个项目模板使用的是 babel-preset-latest，现在推荐使用 babel-preset-env，具体的配置在上一节 Babel 里有详细阐述，这里就不再赘述。

项目结构

这是 webpack-simple 为我们自动生成的目录结构：

node_modules —— 用于存放 npm 安装的模块
src -- 我们的源码文件夹
src/assets -- 一般放一些静态文件，比如 logo
App.vue —— Vue 根组件
main.js —— 项目入口文件
.babelrc —— Babel 配置文件
.gitignore —— git 忽略文件配置
index.html —— 主页面
package.json -- 管理项目信息和依赖
webpack.config.js -- webpack 打包配置文件

main.js

首先我们来看看项目入口文件 main.js 是怎么写的：

//从 node_modules 引入 vue 核心库
import Vue from 'vue'
//相对路径的写法，引入根组件 App.vue
import App from './App.vue'

//创建一个Vue示例，挂在到 id 为 app 的 html 元素中  
new Vue({
  el: '#app',
  //通过调用 render 方法来渲染实例的 DOM 树
  //h 的实参是 createElement 函数，然后 createElement 会以 APP 为参数进行调用
  render: h => h(App)
  //也可以写成 components:{App},然后在index.html内 id 为 app 的元素内插入App标签
})

App.vue

好了，现在打开我们的App.vue文件，在Vue中，官网叫它做组件。App.vue 就是我们的根组件，它还能包含各种各样的子组件。

其实我们现在看到就是一个单页面应用(SPA)的实例，你可能已经注意到了，我们只有一个 html 文件，而所有的组件都会渲染在这一个页面上，所以我们叫做单页面应用。

Vue 允许我们使用文件扩展名为:.vue 的 single-file components(单文件组件) ，通过 webpack 这样的打包构建工具，能够把这些文件转换成最终可以在浏览器运行的 js 文件。

一个 .vue 文件通常分为三个部分：

template
script
style

很好理解，他们分别是结构、脚本、样式，script 就像模块暴露的接口一样，使得外面的代码能够访问到它们。因此你可以把 .vue 文件都理解为一个个的组件积木，积木有大有小，我们的任务就是把它拼装成一个完整的，功能健全的应用。

Webpack.config.js

关于 webpack 的内容，这里并不会太过详细地阐述，或许未来会专门启用一个章节来讲，但是现在你只需要理解它的基本概念就行了。

webpack 把一切输入都当做模块，每个模块都有对应的 loader 来处理，最后打包成一个 js 文件，一般叫做 build.js 或者 bundle.js 。这个打包好的文件内部，包含了我们所有依赖模块以及他们的对应关系。

你可以理解为包括 Vue 的核心在内的所有 js 文件它都帮我们全部打包进来了，所以在浏览器内可以正常地加载运行，而不用我们一个一个地去加载单个脚本文件。

下面我们来看以下 webpakc 的配置文件：

//引用 node 的 path 模块，来处理文件路径
var path = require('path')
var webpack = require('webpack')

module.exports = {
  //项目要打包的入口文件
  entry: './src/main.js',
  //打包输出的配置
  output: {
    //最终的输出路径
    path: path.resolve(__dirname, './dist'),
    //浏览器运行的公共路径
    publicPath: '/dist/',
    //打包文件名
    filename: 'build.js'
  },
  //之前说过，所有要打包的东西都当做模块来处理，所以叫做 module 
  module: {
  //每个模块处理的规则，因为有个很多规则，所以是数组
    rules: [
      //处理 .vue 文件的规则
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      //处理 .js 文件的规则
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      //处理图片文件的规则
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  //设置模块如何被解析
  resolve: {
  //创建import或者 require 的别名
    alias: {
      //$符号代表精准匹配
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  //webpack-dev-server 的配置，
  //我们的 npm run dev 命令就是启用了 webpack-dev-server
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  //性能：这些选项可以控制 webpack 如何通知「静态资源和入口文件超过指定文件限制」
  performance: {
    hints: false
  },
  //开发工具，此选项控制是否生成，以及如何生成 Source Map
  devtool: '#eval-source-map'
}

//控制生产环境和开发测试环境的行为
if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    //文件压缩
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

现在你就可以愉快地在你已经配置好的开发环境下开始愉快地开发了，当然如果只是单独地学习 Vue.js，仍然可以使用单独引用 js 文件在 html 页面中编写。