Vue进阶

Vue脚手架

Vue生命周期:

三大阶段:初始化阶段,服务中阶段,销毁阶段

生命周期函数/钩子函数:

1,组件刚被创建时:beforeCreate created

2,模板/挂载点被加载时:beforeMount mouted

3,组件被更新数据时:beforUpdate update

4,销毁阶段: beforDestroy destroy

可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

细分每个过程：

npm概念:

npm:是包管理器,从网站上,下载/更新/删除一些包

webpack :是一个快速构建前端项目的一个工具,快速的下载,打包,压缩,.....

安装脚手架:

1,安装好nodejs.exe

使用DOS命令来检验安装的版本号:

node -v

配置npm
Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

安装脚手架命令:

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟

npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必

vue –V #查看版本

where vue #vue安装在哪里

Vue项目

  创建工作空间

存放vue项目代码 D:\workspace\vue

下载项目

进入你的工作空间...然后.去执行cmd

D:\workspace\vue>vue init webpack jt01

 

启动项目命令:(重要背 )  npm run dev

启动:

HBuilderX管理Vue项目

打开Vue项目

重要文件说明
Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作: 1, 在components里写自定义组件 2, 在App.vue里注册自定义组件 3, 在main.js里引入第三方js

 index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
 src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中

 src/App.vue 根组件,可以添加自定义组件

 src/router/index.js 引入子组件HellWorld.vue

项目结构:

 自定义Vue组件

1,创建组件(在src/components里)

2,注册组件(修改App.vue)

安装 element-ui

访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南

安装

在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

四,Vue项目整合ElementUI

–1,下载

D:\workspace\vue\jt10>npm i element-ui -S