2-Vue-vue-cli脚手架

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: ''效果等同于
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