vue基础详细讲解，（老人机）式你没见过的详细

小步前进_小H
175 阅读3分钟

_vue脚手架_基础API
vue是什么：vue官网。vue是一个渐进式的javascript框架
库:  封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

image.png 渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用

image.png

image.png

vue的特点

  • 渐进式
  • 数据驱动视图 (响应式)
  • 组件系统

image.png

为啥要学vue

vue已经是国内最流行的框架，越来越成为前端工程师的一项基础技能。开发更加高率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

通过vue可以开发：

  1. pc 项目
  2. 移动端项目
  3. 小程序
  4. 桌面应用

Vue学习的方式

传统开发模式：基于html/css/js文件开发vue

工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式

第一个Vue程序

目标

感受vue.js程序的强大，初步了解vue的特点。

任务

把一个数组里数据铺设到页面的li标签内

原生js做法

<ul id="myUl"></ul>
<script>
  let arr = ["春天", "夏天", "秋天", "冬天"];
  let myUl = document.getElementById("myUl");
  for (let i = 0; i < arr.length; i++) {
    let theLi = document.createElement("li");
    theLi.innerHTML = arr[i];
    myUl.appendChild(theLi);
  }
</script>

Vue.js做法

<div id="app">
  <ul>
    <li v-for="item in arr">{{item}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app", 
    data: {
      arr: ["春天", "夏天", "秋天", "冬天"] 
    }
  })
</script>

小结

  1. vue.js就一个js文件。（node.js不是）
  2. 它不需要操作dom
  3. vue写起来很爽，但是vue的底层还是原生js

vue-cli 脚手架介绍

目标

了解什么是vue-cli, 什么是脚手架

vuecli是什么

vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。

  • 基于webpack
  • 开箱即用,零配置

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

  • 脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务
  • 在开发过程中，脚手架工具是有用的，开发完成（项目上线生产环境），它就没有用了

好处和能力

  • 统一的项目结构(文件夹+文件+配置代码)
  • 开发过程中的webpack各系列支持
    • babel支持
    • eslint约束语法风格（代码风格）
    • 样式预处理器less
    • vue单文件支持
  • 提供一个开发时服务器，预览代码（预览项目）
    • 自动刷新，方便预览
    • 热更新 (只刷新修改的部分)
  • 基于nodejs的命令行工具

安装vue-cli

目标

把@vue/cli模块全局安装

思路

就是一个Npm的第三方包。全局安装即可

步骤

设置npm的淘宝镜像

npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

全局安装命令

npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。

检查是否安装成功

在任意小黑窗中：

vue --version

如果可以看到版本号，就表示安装成功了。

小结

  1. @vue/cli 是完整的包名。包括前面的@符号
  2. 它是vue生态的重要组成部分

vue-cli 创建项目

目标

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

步骤

  1. 创建项目
  2. 选择模板
  3. 安装依赖
  4. 启动项目

1. 创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2. 选择模板

通过键盘的上下箭头选择合适的模板，如果选择错了，可以按下ctrl+c终止操作。

3. 回车安装依赖

等待脚手架工作自动生成项目文件夹+文件， 并下载必须的第三方包。可能要花很久~~~

4. 启动项目

进入脚手架项目下, 启动服务，查看效果

cd vuecil-demo

npm run serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

打开浏览器输入上述地址

总结

  1. 小黒窗中的vue create命令是由@vue/cli提供的。
  2. vue create 用来快速创建项目：会自动创建文件夹

avatar
文章
阅读
粉丝