0.问题
之前我们用npm管理包,利用webpack打包,将入口文件(导入所有需要的外部链接,减少请求次数,压缩代码,提高效率),通过webpack转换为浏览器识别的代码,但是默认webpack只能识别JS和某些高级语法,需要安装各种各样的转换器,才能识别css/less/jpg/png/gif/bmp/iconfont/class,才能够在运行时编译,才能在内存中生成html,监听html的变化,而且项目的目录需要我们自己搭建,dist/src.包括src下面的子文件夹,简单的受就是,搭建项目目录和配置webpack自动打包及webpack各种转换器非常麻烦
1.解决方法
因此vue出来了vue-cli,简单的说就是vue脚手架,能够自动搭建vue基于webpack的项目结构,以及对webpack进行必要的配置
2.重点
预解析器:
1.基于CSS的另一种语言
2.通过工具编译成CSS
3.添加了很多CSS不具备的特性
4.能提升CSS文件的组织
https://blog.csdn.net/jianghao233/article/details/80424394
一.什么是vue-cli
vue-cli是vue官方提供的脚手架工具,类似路由,vuex是外部的工具,只是它是开发工具,那两个是部署工具,vue-cli默认已经帮我们搭建好了一套利用webpack开发的vue的项目结构
二.如何安装vue-cli
- npm i -g vue -D
- npm i -g vue-cli -D
- vue --version
- cmd
- vue init webpack 项目名称
-
需要生成项目文件夹的文件夹下
image.png
三.vue-cli项目结构解读
image.png
image.png
image.png
四.安装webstorm的vue插件生成vue文件
- file
- setting
- plugin
-
vue
image.png
这样我们就可以创建后缀为vue的文件了,简称vue组件
五.初次体验
- 了解index.html
- 了解app.vue
- 创建template
- 导出默认文件内容(name为导出的文件名称)
- 了解main.js
- 导入vue
- 导入组件
- 生成vue对象替代index.html中的div#app
注意:这里的template: '<App/>'效果等同于
render:c=>c("App")
会把整个el指定的DOM替换掉
-
目的:让app.vue中的内容在首页显示
image.png
image.png
image.png
image.png
image.png
6.数据驱动组件
- 原始方法
- 创建一个组件对象
- 注册组件
- 在相应区域使用组件内容
- 现在方法
-
组件文件中导出数据和方法
image.png
image.png
-
六.使用组件
- 在components文件夹下新建组件Bottom
- 导出Bottom组件
- 在App组件中导入Bottom组件
-
注册Bottom组件为App组件的子组件
image.png
image.png
image.png
七.局部样式
- 给Bottom的div添加边框
-
给style添加scoped属性
image.png
image.png
image.png
一般我们不会给App组件添加样式
默认情况下style中编写的样式都是全局有效的,如果想让当前组件的style中编写的样式只对当前组件有效,那么需要在style标签上添加一个scoped属性
八.使用less
- 安装less
npm i less -D(由于less时预处理工具,最终会成为css) - 使用less
lang="less" -
安装less转换器
npm i less-loader -D
image.png
image.png
九.使用路由
- 创建组件
- 创建路由index.js(router)
- 导入vue
- 导入路由(路由依赖于vue)
- 导入组件
- 声明在vue中需要使用的路由
- 创建路由对象
- 在首页注册路由(main.js)
- 导入路由对象
- 给vue注册路由
- 使用路由(App.vue)
- router-link
-
router-view
image.png
image.png
image.png
image.png
image.png
网友评论