vue-cli教程(一) 环境搭建

搭建环境的教程网上很多，简单记录下

环境搭建：

1.安装nodejs和npm 略

2.安装cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue-cli : cnpm install -g vue-cli

4.创建项目：vue init webpack testvue

会有对话框 除了 Install vue-router? (Y/n) 选择Y ，其他的暂时都选择 n 或者默认（暂时没明白，先不添加了）

5. 执行：

cd testvue

cnpm install （虽然有些依赖下不到，但是还能将就着用）

6. npm run dev (生成好了之后如果在浏览器看到welcome页面 ,算搭建成功了)

7.如果初学者像我好奇，应该怎么生成静态文件，部署，运行 npm run build

会生成 dist 文件夹，然后将dist文件夹放在类似于 tomcat ,apache,nginx的工作目录下就可以在浏览器上正常访问了，初次访问会出现js无法加载，就 在 config/index.js中

assetsPublicPath: './',   //这个要加上 . 将绝对路径改成相对路径

8.vue的常用函数：

//数据

data:function(){

return { message：“参数”

}

}

//方法

methods:{

add:function(){} ,

}，

//监听数据，需要在data和props里定义

watch:{

message:function(newVal,oldVal){}

}

//计算属性，不可以在data和props定义

computed:{

newMessage:function(){}

}

9.生命周期函数（vue-2）：

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeUpdate：数据变化，页面更新之前调用

updated：页面更新之后调用
beforeDestory： 你确认删除XX吗？

destoryed ：当前组件已被删除，清空相关内容