脚手架-准备

步骤

0. 全局安装@vue/cli模块包

yarn global add @vue/cli
# OR
npm install -g @vue/cli

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

• 停止重新来
• 换一个网继续重来

2. 查看Vue命令版本 vue -V（-V为大写）

脚手架-创建项目-启动服务

步骤

0. 创建项目

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

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

2. 选择模板

   ==可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来==

选择包管理器

等待下载脚手架项目, 需要的依赖包(<.<喝点水, 等会老铁)

5. 终端切换脚手架项目下, 启动内置的==webpack热更新开发服务器==

cd vuecil-demo
​
yarn serve
# 或 npm run serve

6. 只要看到绿色的 - 啊. 你成功了

开心的 - 浏览器中 - 输入上述地址

脚手架-目录分析

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 # 依赖包列表


└── yarn.lock    # 项目包版本锁定和缓存地址
    
    主要文件及含义

node_modules      – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js       – webpack打包的入口文件
src/App.vue       – Vue入口页面
package.json      – 依赖包列表文件和自定义命令

脚手架-代码和结构分析

脚手架-自定义配置

步骤

配置文件叫vue.config.js

0. src并列处, 新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

脚手架-eslint了解

eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格

0. 例子: 先在main.js 随便声明个变量, 但是不要使用

2. 运行后观察发现, 终端和页面都报错了

==这样的错误, 证明eslint发现你代码不严谨==

解决

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

脚手架-单vue文件

0. template里只能有一个根标签
1. vue文件-独立模块-作用域互不影响
2. style配合scoped属性, 保证样式只针对当前template内标签生效
3. vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>
​
<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>
​
<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>
​

脚手架-清理欢迎界面

步骤

0. src/App.vue默认有很多内容, 可以全部删除留下框

   
   <template>
     <div></div>
   </template>
   ​
   <script>
   export default {
   ​
   }
   </script>
   ​
   <style>
   ​
   </style>
   

1. assets 和 components 文件夹下的一切删除掉 (不要logo和HelloWorld页面)

阶段小结-脚手架环境

小结

0. @vue/cli是什么?

   答案

   • 全局模块包, 安装后得到Vue命令

1. 如何创建脚手架项目?

   答案

   • vue create 项目名, 得到一套标准文件夹+文件+webpack环境

2. 脚手架项目如何启动?

   答案

   • yarn server启动, 内置了webpack-dev-server, 得到一个地址和端口浏览器webpack打包后网页

3. 脚手架项目好处?

   答案

   • 开箱即用, 配置好的一套环境, 快速开发自己项目

4. 脚手架项目入口有哪些?

   答案

   • main.js - webpack打包入口
   • App.vue - Vue页面入口
   • index.html - 网页入口

5. 单Vue文件的好处?

   答案

   • 独立作用域,作用域互不影响
   • style配合scoped, 样式针对当前页面标签生效, 互不影响
   ## Vue语法-插值表达式 例子:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>
​
<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

Vue基础-MVVM设计模式

演示

演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)

等下面学了v-model再观察V改变M的效果

讲解

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)
  • V： view视图 （页面标签）
  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V （修改视图） -> M（数据自动同步）
  • M（修改数据） -> V （视图自动同步）

在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！ (思想转变)

Vue指令-v-bind动态属性

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

结尾为大家献上Vue的常用命令