十六、Vue CLI 脚手架

?️ Vue.js 开发的标准工具

1. 什么是vue-cli

官方提供的一个脚手架，用于快速生成一个 vue 的项目模板

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。

2. 主要功能特点

统一的目录结构
本地调试
热部署
单元测试
集成打包上线
功能丰富
易于扩展
无需 Eject

3. 环境安装

Node.js：nodejs.cn/download/
- 新版本都自带npm
- npm：一个软件包管理工具，类似于Linux的apt
- npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
Git：git-scm.com/downloads
- 淘宝镜像：npm.taobao.org/mirrors/git…

检查Node.js安装是否成功：
- cmd 下输入 node -v,打印出版本号即可!
- cmd 下输入 npm-v,打印出版本号即可!

安装 Node.js 淘宝镜像加速器（cnpm）:
- 提高下载速度

# -g 就是全局安装
npm install cnpm -g

# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org

# 然后再执行
npm install cnpm -g
复制代码

一般的安装的位置：C:\Users\Administrator\AppData\Roaming\npm

4. 安装vue-cli

三选一：

# 安装了cnpm
cnpm install vue-cli -g
# 没安装cnpm
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
复制代码

查看是否安装成功

# 查看是否安装成功
vue list
复制代码

安装版本的问题

按照提示的信息：

# 先卸载当前版本
npm uninstall -g vue-cli

# 安装新的包
npm install -g @vue/cli
复制代码

# 检查版本
vue --version
❯ @vue/cli 4.5.7
复制代码

为什么呢？

因为根据官方文档，需要升级Vue CLI的版本到3以上。

cli.vuejs.org/zh/guide/in…

5. 第一个vue-cli程序

使用两种不同方式去创建vue-cli项目：

vue create name
vue init webpack name：基于WebPage模板

ES5 (全浏览器支持)

ES6 (常用，当前主流版本: webpack打包成为ES5支持! )

不管是哪种创建方式，都先是安装环境依赖npm install，最后运行的命令都是：

npm run dev

npm run dev不行，就试试npm run serve或npm run start

至于为什么，看这篇文章：npm run dev 报错：missing script:dev

5.1 vue create

终端使用命令，直接创建第一个vue-cli项目：

vue create myvue
复制代码

然后，会被提示选取一个 preset：

你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。甚至是最新的Vue 3.0 beta。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

选择Vue 2的默认配置选项：

初始化并执行：

cd myvue
npm install
npm run dev #不行就npm run serve
复制代码

5.2 vue init webpack

终端使用命令，直接创建第一个vue-cli（基于WebPage模板）项目：

vue init webpack mywebpack
复制代码

提示	说明
Project name	项目名称，默认回车即可
Project description	项目描述，默认回车即可
Author	项目作者，默认回车即可
Runtime + Compiler	运行时编译
Install vue-router	是否安装 vue-router？选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code	是否使用 ESLint 做代码检查？选择 n 不安装（后期需要再手动添加）
Set up unit tests	单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch	单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created	创建完成后直接初始化？选择 n，我们手动执行

一路选择 n ，主要是自己手动实践去完成这些模块。

初始化并执行：

cd mywebpack
npm install (or if using yarn: yarn)
npm run dev
复制代码

5.3 执行运行

不管是哪种创建方式，都先是安装环境依赖npm install；
最后运行的命令都是：

npm run dev

npm run dev不行，就试试npm run serve或npm run start

至于为什么，看这篇文章：npm run dev 报错：missing script:dev

Vue CLI在安装模块依赖的时候，会有些警告或报错，都会有提示为什么，然后使用什么命令去修复。

访问 http://localhost:8080 ：

6. Vue-cli目录结构

后面的文章主要是介绍了src文件夹的内容，*其他目录结构，搭配视频食用：*www.bilibili.com/video/BV18E…

先看看两种方式创建的项目目录结构：

6.1 结构说明

build 和 config：WebPack 配置文件
node_modules：用于存放 npm install 安装的依赖文件
src：项目源码目录
static：静态资源文件
.babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
.editorconfig：编辑器配置
eslintignore：需要忽略的语法检查配置文件
.gitignore：git 忽略的配置文件
.postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
index.html：首页，仅作为模板页，实际开发时不使用
package.json：项目的配置文件
- name：项目名称
- version：项目版本
- description：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖

6.2 src源码目录

上述两种创建方式，初始化创建的src源码文件夹中文件全是一样的，都含有这三个关键的文件：main.js、App.vue、HelloWorld.vue。但是内容会有小些不同。

src 目录是项目的源码目录，所有代码都会写在这里
- 图片等资源文件都存放在assets文件夹
- 所有自定义组件都存放在component文件夹

VUE中assets与static的区别：

www.jianshu.com/p/8341edbc7…

下面主要介绍的是WebPack项目的main.js、App.vue、HelloWorld.vue文件。

main.js

项目的入口文件，我们知道所有的程序都会有一个入口

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})
/*
new Vue({
  render: h => h(App),
}).$mount('#app')
*/
复制代码

import Vue from 'vue'：ES6 写法，会被转换成 require(“vue”); （require 是 NodeJS 提供的模块加载器）
import App from './App'：意思同上，但是指定了查找路径，./ 为当前目录
Vue.config.productionTip = false：关闭浏览器控制台关于环境的相关提示
new Vue({...})：实例化 Vue
el: '#app'：查找 index.html 中 id 为 app 的元素
render: h => h(App)：render是一个方法，自带一个形参createElement（就是h,一个形参，没有具体意义，可以随意改变书写），这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上。
- 跟 template 一样都是创建 html 模板的；
- 但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。
- 详见：官方文档和文章①和文章②
.$mount('#app')：手动挂载，挂载到制定的页面节点（index.html 中 id 为 app 的元素）。在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。

可能有的其他参数信息：

template: '<App/>'：模板，模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

components: { App }：引入组件，使用的是 import App from './App' 定义的 App 组件

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="https://juejin.cn/post/assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
复制代码

template：模板，将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
import HelloWorld from './components/HelloWorld.vue'：引入 HelloWorld 组件，用于替换 template 中的 HelloWorld 标签
export default {…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入
- name: 'App'：定义组件的名称
- components: { HelloWorld }：定义子组件

component/HelloWorld.vue

定义了<HelloWorld>组件
所有自定义组件都存放在component文件夹

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端