技术改变生活

Technology changes life,Life-long learning

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 项目名称
  • 需要生成项目文件夹的文件夹下

    《2-Vue-vue-cli脚手架》

    image.png

三.vue-cli项目结构解读

《2-Vue-vue-cli脚手架》

image.png

《2-Vue-vue-cli脚手架》

image.png

《2-Vue-vue-cli脚手架》

image.png

四.安装webstorm的vue插件生成vue文件

  • file
  • setting
  • plugin
  • vue

    《2-Vue-vue-cli脚手架》

    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中的内容在首页显示

    《2-Vue-vue-cli脚手架》

    image.png

《2-Vue-vue-cli脚手架》

image.png

《2-Vue-vue-cli脚手架》

image.png

《2-Vue-vue-cli脚手架》

image.png

《2-Vue-vue-cli脚手架》

image.png

6.数据驱动组件

  • 原始方法
    • 创建一个组件对象
    • 注册组件
    • 在相应区域使用组件内容
  • 现在方法
    • 组件文件中导出数据和方法

      《2-Vue-vue-cli脚手架》

      image.png

      《2-Vue-vue-cli脚手架》

      image.png

六.使用组件

  • 在components文件夹下新建组件Bottom
  • 导出Bottom组件
  • 在App组件中导入Bottom组件
  • 注册Bottom组件为App组件的子组件

    《2-Vue-vue-cli脚手架》

    image.png

    《2-Vue-vue-cli脚手架》

    image.png

    《2-Vue-vue-cli脚手架》

    image.png

七.局部样式

  • 给Bottom的div添加边框
  • 给style添加scoped属性

    《2-Vue-vue-cli脚手架》

    image.png

    《2-Vue-vue-cli脚手架》

    image.png

    《2-Vue-vue-cli脚手架》

    image.png

一般我们不会给App组件添加样式

默认情况下style中编写的样式都是全局有效的,如果想让当前组件的style中编写的样式只对当前组件有效,那么需要在style标签上添加一个scoped属性

八.使用less

  • 安装less
    npm i less -D(由于less时预处理工具,最终会成为css)
  • 使用less
    lang=”less”
  • 安装less转换器
    npm i less-loader -D

    《2-Vue-vue-cli脚手架》

    image.png

    《2-Vue-vue-cli脚手架》

    image.png

九.使用路由

  • 创建组件
  • 创建路由index.js(router)
    • 导入vue
    • 导入路由(路由依赖于vue)
    • 导入组件
    • 声明在vue中需要使用的路由
    • 创建路由对象
  • 在首页注册路由(main.js)
    • 导入路由对象
    • 给vue注册路由
  • 使用路由(App.vue)
    • router-link
    • router-view

      《2-Vue-vue-cli脚手架》

      image.png

      《2-Vue-vue-cli脚手架》

      image.png

      《2-Vue-vue-cli脚手架》

      image.png

      《2-Vue-vue-cli脚手架》

      image.png

      《2-Vue-vue-cli脚手架》

      《2-Vue-vue-cli脚手架》

      image.png

原文始发于:2-Vue-vue-cli脚手架

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注