学Vue

目标: 更少的时间,干更多的活. 开发网站速度, 快

虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js

开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

现在很多项目都是用vue开发的

Vue是什么

渐进式javacript框架, 一套拥有自己规则的语法

官网地址: https://cn.vuejs/ (作者: 尤雨溪)

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

什么是库和框架

补充概念:

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

@vue/cli 脚手架介绍

目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目

  • @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

    脚手架是为了保证各施工过程顺利进行而搭设的工作平台>

@vue/cli的好处

  • 开箱即用

    0配置webpack

    babel支持

    css, less支持

    开发服务器支持

@vue/cli安装

目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

  • 全局安装命令
yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c

  1. 停止重新来
  2. 换一个网继续重来
  • 查看vue脚手架版本
vue -V

总结: 如果出现版本号就安装成功, 否则失败

@vue/cli 创建项目启动服务

目标: 使用vue命令, 创建脚手架项目

注意: 项目名不能带大写字母, 中文和特殊符号

  1. 创建项目
# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

  1. 选择模板

    可以上下箭头选择, 弄错了ctrl+c重来

回车等待生成项目文件夹+文件+下载必须的第三方包们
4. 进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

只要看到绿色的就成功了(底层node+webpack热更新服务)
打开浏览器输入上述地址
locahost:8080

@vue/cli 目录和代码分析

目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

这期我们给大家介绍了如何安装并创建vue项目，下期我们介绍简单的api及单个的vue文件

更多推荐

vue脚手架的基本使用