使用vue脚手架（vue-cli）搭建项目框架

使用vue脚手架（vue-cli）搭建项目框架

vue-cli 安装命令

一：npm install -g @vue/cli（4.0脚手架的安装命令）

二：使用npm/cnpm/npx/yarn 全局安装后的文件都放在C:\Users\demin\AppData\Roaming\npm

三、使用cnpm/npm uninstall @vue/cli 这个并不能完全删除我们的安装库，手动直接删除（Shift + Delete 按键永久删除安装包）

（如果有一天vue使用不了），进入上面的目录，删除vue相关的 和 @vue，然后重新安装就可以了

项目创建

一：创建项目 vue creat appname

（一般我们把配置文件都单独生成出来，不会放到package.json里面）

一般都是我们自己配置项目文件，所以不选默认

二：开启服务（不用配置文件）

脚手架原理

相当于在node里面写了一个开发库，通过npm下载到本地后，全局安装后，运行后，根据不同的版本号，去github上面拉取对应的版本信息，解析所有的依赖文件，然后自动安装依赖文件，这样就得到了完整一个系统。然后初始化项目的文件，下载下来，解压到我们的项目文件夹。

项目文件说明

一定不能上传node——moudels

eslintrs.js文件：语法检查规则

babel.config.js：es6转es5配置

README.md文件

根据项目的不同，我们自己要来写README文件

一道面试题：

vue-loader用来干嘛的？

用来解析.vue文件，编译vue代码

配置vue.config.js文件

由于vue里面集成了webpack打包工具，如果我们默认npm run bulid命令，则会安装webpack的默认进行打包，但是有时候我们根据项目需要，自己需要配置一些不一样配置，这个时候，我们就需要置vue.config.js文件了（在vue里面，进行打包发布的时候，会自动去寻找vue.config.js文件，并按照里面的文件进行配置项目）

因为webpack是基于node环境进行开发的，所以我们在进行配置文件的时候，需要遵循commonJS的模块化规范

vue.config.js

是一个node模块文件

它必须与package.json在同一目录下

它必须导出一个对象

在项目入口文件中，引入Vue进行组件开发

Vue是es6的代码。所以遵循的是es6-module的规范。

一个vue实例，必须要有一个页面模板或者是render方法

页面模板：template

render方法：用于写一些高级组件

在项目启动的时候，会把页面元素给替换掉，就没有id=root这个属性了，但是index.html必须还是有id=root这个div盒子

vue的组件

一个 .vue后缀的文件就是一个vue组件

在项目的入口文件中 main.js 作为一个组件管理文件，在main.js里面引入其他组件

定义区域块（script、 template、sytle 分别为js，html，css区域快）

一个vue组件必须要导出 es6的导出 exprot defult

在main.js里面就可以在render里面可以使用

style代码块

使用scoped来声明的样式，仅供当前页面使用。不加的话，是全局的样式，是一个预样式

在一个vue组件中，需要引入其他组件，需要使用 components 单独定义

在和data同级的目录下面

vue的生命周期 四对（8个） (重要)

四对：创建、挂载、更新、销毁

语义化名称：

//vue创建之前的生命周期，页面节点已经我们的数据，都没有完成初始化
beforeCreate (){  //创建前(不常用)
	//初始值和dom节点都拿不到
}
//vue创建之后的生命周期，初始话页面数据周期，常用的一个生命周期。页面初始话的ajax请求，常量的赋值
created(){  //创建后
    //初始值能拿到，dom节点拿不到
}
//vue挂载之前的生命周期
beforeMount(){  //挂载之前（没啥用）
    //初始值能拿到，dom节点拿不到
}
//vue挂载之后的生命周期
Mounted(){  //挂载之后
    //初始值，dom节点都能拿到
    //当前节点组件需要操作DOM的时候，可用这个生命周期。如：echarts、highChart、d3、antV、ht（ht.js）、thing.js初始化
}
//vue挂载更新之前的生命周期。绑定到页面DOM节点上的数据，发送变化的时候，才能触发这个这个生命周期（没有绑定到页面DOM节点上的数据，不会触发这个生命周期）
beforeUpdate(){ //更新之前 （没啥用）
    
}
//vue挂载更新之后的生命周期，在编辑页面，如果用户修改了当前页面数据后，在没有保存就退出页面的时候，我们提醒用户保存数据
Updated(){ //更新之后 （没啥用）
	   
}