使用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(){ //更新之后 (没啥用)
}