Vue CLI 脚手架

🍅程序员小王的博客：程序员小王的博客
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
🍅 如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕
🍅java自学的学习路线：java自学的学习路线

一、什么是CLI 脚手架（规范，标准）

• 官方：Vue.js 开发的标准工具
• **CLI ** ：命令行界面

命令行界面（英语：command-line interface，缩写：CLI ）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

二、什么是Vue CLI

• vue的命令行接口，相当于java中的(项目创建管理：maven 项目构建工具)
• 通过vue cli提供的一个标准的vue应用 这个vue应用就存在对应的脚手架规范
• Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 前端系统
• 脚手架（vue项目的规范）=》构建时需要使用命令=》构建出的项目就存在规范===》命令：构建项目+开发：图像界面开发

三、 Vue CLI优势

• 通过 vue-cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发（不需要引入vue-min.js等）
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级;（一个命令搞定）
  • 基于 webpack 构建，并带有合理的默认配置；（webpack 前端打包工具 ）index.html+组件（N个）
  • 可以通过项目内的配置文件进行配置； cli 项目配置文件 添加
  • 可以通过插件进行扩展。 cli 项目里
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。 webpack打包工具===>dist目录 nodejs 服务器(tomcat java) 热部署插件 npm包
• webpack 编写的时候是javascript6运行时自动编译为javascript6
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面（vue cli3.x才支持 | 当前企业中用的是vue cli 2.x）
• node.js 的服务器 支持热部署

四、Vue CLI安装

1. node.js环境准备

（1）下载nodejs

http://nodejs.cn/download/

windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录

mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

（2）配置nodejs环境变量

• 1.windows系统:
  计算上右键属性----> 高级属性 ---->环境变量 添加如下配置:

  NODE_HOME=  nodejs安装目录
  
    PATH    = xxxx;%NODE_HOME%
  

• 2.macos 系统
  推荐使用.pkg安装直接配置node环境

（3）验证nodejs环境是否成功

启动cmd窗口

在任意位置 输入命令： node –v

展示node版本即可v14.0.0

（4）npm介绍

• node package mangager nodejs包管理工具 前端主流技术 npm 进行统一管理
• maven 管理java后端依赖 远程仓库(中心仓库) 阿里云镜像
• npm 管理前端系统依赖 远程仓库(中心仓库) 配置淘宝镜像
• npm (node package manager) nodejs包管理工具

在世界范围内维护的中心库，用于管理前端js文件

• 命令基本使用

npm install axios         通过网络从中心库下载axios  没有版本时默认下载最新版本

npm install axios@x.x.x   通过网络从中心库下载axios指定版本

（5）配置淘宝镜像

npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org)

• 查看淘宝镜像是否安装成功

npm config get registry

（7）配置npm下载依赖位置

#windows:
  #1.设置缓存位置
  npm config set cache "D:\noderepository\npm-cache"
  #2.设置
  npm config set prefix "D:\noderepository\npm_global"

#mac os:

  npm config set cache "/Users/chenyannan/dev/nodereps"

  npm config set prefix "/Users/chenyannan/dev/nodereps"

（8）验证nodejs环境配置

npm config ls

2.安装脚手架

(1)卸载脚手架

  npm uninstall -g @vue/cli  //卸载3.x版本脚手架
  npm uninstall -g vue-cli  //卸载2.x版本脚手架

(2)Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

(3)安装vue Cli

npm install -g vue-cli

• 输入 vue init

(2)配置nodejs本地仓库环境变量

path=…;D:\noderepository\npm_global

目的：便于后续使用vue cli相关命令

(3)测试命令能否执行

窗口中输入命令 ：vue init

显示如上界面即可

3.第一个vue脚手架项目

(1) 创建vue脚手架第一个项目

• vue init webpack 项目名

(2)创建第一个项目

• 下载失败提示

• 下载成功后

  hello     ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖  构建一些依赖文件
    -config ------------->用来做整个项目配置目录   主要用来对 开发 测试 环境进行配置
    -node_modules  ------>用来管理项目中使用依赖
    -src           ------>用来书写vue的源代码[重点]
      +assets      ------>用来存放静态资源 [重点]
        components   ------>用来书写Vue组件 [重点]
        router       ------>用来配置项目中路由[重点]
        App.vue      ------>项目中根组件[重点]
        main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

• 下载成功后

• 文件显示

(3)如何运行在项目的根目录中执行

a、 切换到创建项目的根目录

b、 在项目根目录中执行命令 npm run dev

(4)如何访问项目

• http://localhost:8080

(5)项目的包结构

• 传文件时这两个文件可以删除./当前目录

(5)Vue Cli中项目开发方式

• 注意: 一切皆组件 一个组件中 js代码 html代码 css样式
  1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
  2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

5、案例

• components中（组件中）

<template>
  <div class="hello">
    {{msg}}
    <h1>这是我女朋友杨福君！</h1>
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
      msg: '人物介绍'
    }
  }
}
</script>

• router路由

import Vue from 'vue'
import Router from 'vue-router'
import user from '@/components/user'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/user',
      name: 'User',
      component: user
    }
  ]
})

• app.vue组件

<template>
  <div id="app">
    <img width="600px" src="./assets/logo.jpg">
    <router-link :to="{name:'User'}">展示用户信息</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

• main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})