vue安装配置+生命周期

VUE 组件化、快速开发

 

vue的生命周期:

beforeCreate 组件刚刚被创建

created  组件创建之后

beforeMount  组件挂载之前

mounted 组件挂载之后

beforeDestroy  组件销毁之前

destroyed  组件销毁之后

 

vue安装

首先要先安装node.js,然后再安装npm,然后换cnpm淘宝镜像

vue安装配置+生命周期_第1张图片

 

 

由于使用cmd进入指定目录非常不智能,因此推荐安装git

去git官网下载,傻瓜式安装即可

补充:git官网下载超级超级慢,推荐大家这个  https://npm.taobao.org/mirrors/git-for-windows/

 

安装成功后进入项目目录,右键-git bash here

vue安装配置+生命周期_第2张图片

 

 

全局安装

cnpm install --global vue-cli

vue安装配置+生命周期_第3张图片

 

 

创建一个基于webpack模板的新项目

vue init webpack my_project

vue安装配置+生命周期_第4张图片

 

 vue安装配置+生命周期_第5张图片

 

 这样代表安装完成,查看项目

vue安装配置+生命周期_第6张图片

 

 

安装依赖包

cd my_project

cnpm install

cnpm run dev

vue安装配置+生命周期_第7张图片

 

 在浏览器访问 localhost:8080

vue安装配置+生命周期_第8张图片

 

 然后在编辑器打开项目,爱用啥编辑器就用啥,sublime也行,不过我最近比较喜欢vscode

在my_project的src目录下,新建文件夹pages,在pages下新建文件夹demo1,在demo1下新建文件index.vue

vue安装配置+生命周期_第9张图片

 

 

在index.vue里敲点代码

vue安装配置+生命周期_第10张图片

 

 

然后打开router->index.js

这个文件是用来设置路由的

vue安装配置+生命周期_第11张图片

 

 

浏览器访问:

vue安装配置+生命周期_第12张图片

 

 

接下来修改index.vue的代码,查看下各个周期函数



vue安装配置+生命周期_第13张图片

 

你可能感兴趣的:(vue安装配置+生命周期)