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/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. 启动项目

5. 创建项目

# 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 用来快速创建项目：会自动创建文件夹
   **

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文件
    ├── package.json # 描述项目及项目
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置 
    ├── README.md    # 项目说明
	  └── package-lock.json # 项目包版本锁定和下载地址

码运行基础

webpack + webpackdevserve
可以在nodemoudels中找到 webpack相关的包。
**

代码运行流程

**

整套代码是基于webpack的。

**

项目打包

**

npm run build 

小结

1. vue-cli使用vue 命令快速创建项目，它创建的每个项目都有相同的结构；
2. 它的运行机制是基于webpack的

**

vue-cli 覆盖webpack配置

**
目标
使用vue.config.js覆盖webpack的配置。
背景
项目中没有webpack.config.js文件，因为vue用的vue.config.js
操作
项目根目录下新建vue.config.js（和src同级）补充devServer

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host: 'localhost',
    open: true,
    port: 3000
  },
  lintOnSave: false // 关闭eslint
})

重启项目，查看效果
小结

1. vuecli的项目中不能直接看到webpack的配置
2. 可以创建vue.config.js来覆盖webpack的配置

**

vue基础-插值表达式

**
vue有一个最基本的功能： 数据渲染。 将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。
这里它不会直接操作dom，而是有自己的语法。

目标
学习插值表达式的用法
功能
将data中定义的数据显示到模板上。

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。
把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）

语法

{{ }} 可以：

● 写data数据字段名称
● 对data数据字段进行表达式运算
○ 拼接
○ 算术运算
○ 三元运算
○ …

{{}}不能：

● js语句：声明变量，分支，循环
● 访问在vue实例中的data之外定义的自定义的变量