Vue实例

用Vue官方提供的脚手架工具Vue-cli创建项目；

1， npm install -g Vue-cli

2,  Vue init webpack Vue-project

3,  cd Vue-project

4,  npm install  

5, npm run dev (开发环境) 

 

项目目录构成：

1，build     webpack配置文件

2，config    build依赖文件

3,  src         页面和逻辑文件

4， .开头的文件      以.开头的文件都是一些配置文件

5，package.json    npm依赖的模块。 

 

 Vue实例 

// 变量app就是代表Vue的实例

const app = new Vue({

/**

* el指定一个页面中已存在的DOM来挂载Vue的实例

* 可以是html元素， 也可以是css选择器

* 可以通过$el来访问元素(Vue提供的很多属性和方法都是以$开头)

* 如果Vue在实例化的时候没有收到el选项;他就处于未挂载状态; 使用$mount() 手动挂载，该方法返回实例自身。

用app.$mount('#app') 挂载

*/

el: document.getElementById('app'), // el: '#app',

/**

* data：所有会用到的数据都预先在data内声明,将数据散落在业务中难以维护

*

注意：当在组建中定义的时候，data 必须声明为返回一个初始数据对象的函数,

* 因为组件可能被用来创建多个实例,

* 如果 data 仍然是一个纯粹的对象，

* 则所有的实例将共享引用同一个数据对象,

* 通过提供 data 函数，每次创建一个新实例后，

* 我们能够调用 data 函数，

*

* 从而返回初始数据的一个全新副本数据对象。

* 如果return 出的对象引用了外部的一个对象，

* 那么这个对象就是共享的，任何一方修改都会同步

*

* data(){ return {}}

*

* Proxy： Vue本身做了data对象的所有属性的代理 ，所以可以通过Vue实例 app.message 访问

*/

data: {

message: 'msg' // app.message 访问

},

router,

render: h => h(App),

});