使用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里面)

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

使用vue脚手架(vue-cli)搭建项目框架_第1张图片

二:开启服务(不用配置文件)

在这里插入图片描述

脚手架原理

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

项目文件说明

一定不能上传node——moudels

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

babel.config.js:es6转es5配置
使用vue脚手架(vue-cli)搭建项目框架_第2张图片

README.md文件

使用vue脚手架(vue-cli)搭建项目框架_第3张图片
根据项目的不同,我们自己要来写README文件
使用vue脚手架(vue-cli)搭建项目框架_第4张图片

一道面试题:

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-cli)搭建项目框架_第5张图片
使用vue脚手架(vue-cli)搭建项目框架_第6张图片
使用vue脚手架(vue-cli)搭建项目框架_第7张图片

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

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

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

页面模板:template

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

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

使用vue脚手架(vue-cli)搭建项目框架_第8张图片

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

你可能感兴趣的:(学习笔记,vue.js)