Vue环境搭建

NodeJs开发环境安装

学习node，首先要安装node的环境，nvm是一款工具，使用这款工具可以很方便的下载所需版本的node文件以及npm，十分的方便。
NVM可以方便的在同一台设备上进行多个node版本之间切换

nvm-windows 最新下载地址：
https://github.com/coreybutler/nvm-windows/releases
nvm install lastest 64  //安装最新版NodeJs
nvm use 11.4.0           //使用指定版本NodeJs
    

搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具

npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只需要执行一次）

创建项目 必须cd到对应的一个项目里面

    
        vue init webpack vue-demo01

        cd  vue-demo01 
        
        cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
        
        npm run dev

另一种创建项目的方式 （推荐） ***

vue init webpack-simple vuedemo02

        cd  vuedemo02
        
        cnpm install   /  npm install        
        
        npm run dev

项目运行（拉取别人项目，缺少model,需要install,安装）

1、cd 到demo里面

    如：cd vuedemo

2、安装依赖：

    cnpm install   


3、运行项目

    npm run dev

Vue目录结构解析

node_modules  项目需要的各种依赖(根据package.json里的配置下载，拷项目出去不需要用到这个模块)
src 项目用到的所有资源
   assets资源文件
   App.vue 根组件（其他的组件都需要在此引入）
   main.js 实例化Vue组件
.babelrc的配置文件（不用管）
.editorconfig编辑器的配置文件
.gitignore过滤的文件
index.html  入口文件 （写移动端需要改动）
package.json 管理更各种依赖，及文件名称，描述，作者，版本等
README.md 项目的说明文件
webpack.config.js  webpack的配置文件，它能让vue文件打包成浏览器能识别的


vue的模板里面，所有的内容要被一个根节点包含起来

安装同步或异步数据传送

安装 vue-resource
1.npm install vue-resource --save  #加上--save代表将安装路径写入package.json，别人拷贝项目后能直接引用
2.在main.js里引入  import VueResource from 'vue-resource'
3.Vue.use(VueResource); #代表使用插件

安装axions
1安装 cnpm install axions --save
2.在哪里用，就在哪里引用 import 

vue生命周期

        beforeCreate(){
            console.log('实例刚刚被创建1');
        },
        created(){
            console.log('实例已经创建完成2');
        },
        beforeMount(){
            console.log('模板编译之前3');
        },
        mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
            console.log('模板编译完成4');
        },
        beforeUpdate(){
            console.log('数据更新之前');
        },
        updated(){
            console.log('数据更新完毕');
        },
        beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
            console.log('实例销毁之前');
        },
        destroyed(){
            console.log('实例销毁完成');
        }