介绍

vue.js(简称Vue) 是一个用于创建用户界面的渐进式开源的JavaScript框架，也是一个创建单页面应用的web应用框架, 通过组件化的形式可以创建页面，单个组件的结构层次非常清晰，所谓渐进式就是容易上手。组件模板、逻辑操作，数据位置，函数钩子记忆其作用就可上手使用。

如何创建一个单页面应用

创建一个单页面应用可以使用手脚架vue-cli,也可以使用 script引入的方式，也可以用webpack来搭建环境来配置。

vue-cli

vue create vue-project  根据配置会生成一个vue项目
vue ui 基于可视化的来配置一个vue项目

webpack webpack 配置就需要插件及loader来搭建环境,css-loader、style-loader、vue-loader、html-webpack-plugin、babel、webpack-dev-server等主要插件，以及一些辅助性插件，优化项目插件。

webpack.config.js
module.exports = {
  // 定义入口文件
  entry: './src/index.js',
 //定义打包后的文件出口
 output: {
      filename: '[name].[hash:5].js',
      path: path.resolve(__dirname, './dist'),
      publicPath: '/'
  },
  module: {
      rules: [
          {
              test:/\.css$/,
              use: [
                  {
                    loader: 'style-loader'
                  },
                  {
                    loader: 'css-loader'
                  }
              ]
          },
          {
              test: /\.vue$/,
              exclue:/node_modules/,
              use: [
                  {
                     loader: 'vue-loader'
                      
                  }
              ]
          
          }
      ]
  
  },
  plugins: [
      new HtmlWebpackPlugin({
          template: 'index.html'
      }),
      new vueLoaderPlgun()
  ]
}

script 引入方式

<html>
<head>
<script src="vue.js"></script>
</head>
<div id="app"><div>
<script src="othermodule.js"></script>
<script src="othermodule.js"></script>
</html>

创建vue的时候会发生什么

const vm = new Vue({ render: h => h(template) }).$mount('#app')

我们这里可以看出创建一个单页面应用其实就是生成了Vue 方法的实例，会传入一些参数，然后调用了Vue上的$mount方法，回传一个对象，这些参数分为data、methods、lifecycle等。

function Vue(options) {
   if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) {
       warn ('Vue is constructor and should be called with new keyword')
   }
   //通过init来对options来进行初始化
   this._init(options)
}
// initMixin 初始化的混入
initMixin(Vue) 
// 状态混入
stateMixin(Vue)
// 时间混入
eventsMixin(Vue)
// 生命周期混入
lifecycleMixin(Vue)
// 渲染混入
renderMixin(Vue)
这些方法执行完成后就执行$.mount('#app') 这个方法了

看了这个顺序我们都知道是当初始化完成后才会挂载到app这个元素上。

Vue 源码 new Vue会发生什么？

介绍

如何创建一个单页面应用

创建vue的时候会发生什么