第13章 VueCLI

不引入脚手架，就需要配置很多与业务逻辑无关的东西，比如要考虑组织结构、构建、部署、热加载、单元测试等。自己开发的话，可能漏洞百出，且开发效率低，所以要引入框架，走标准化工作流。利用框架，构建出标准化的、强壮的代码。在VUE.js中，我们使用的框架就是VUE CLI。

13.1 简介

使用vue-cli这样的脚手架，可以减少大量配置，快速搭建项目框架，专注于业务实现的代码逻辑。

vue3.0开始，包名由原来的vue-cli改成了@vue/cli。@vue/cli有3个组件：

CLI（@vue/cli）：是个全局安装的npm包。提供了终端里的vue命令，如vue create、vue serve、vue ui，分别实现快速搭建项目、运行项目、启动vue ui管理项目。
CLI服务（@vue/cli-service）：cli服务是开发环境依赖，是个npm包，本地安装到@vue/cli创建的每一个项目中。项目内部的vue-cli-service命令，包含serve build inspect等就来源于CLI服务。
CLI插件：CLI插件是给vue项目提供的可选功能的npm包，如Bable/TypeScript转译、ESLint集成、单元测试、端到端测试等。VUE CLI插件名字，以@vue/cli-plugin-（内置插件）、vue-cli-plugin（社区插件）开头。

13.3 安装

npm install -g @vue/cli
vue --version

13.2 创建项目

两种方式，一种是命令行vue create <projectname>创建项目，一种是通过vue ui启动图形化界面创建项目。

需要注意的是：项目名称不能有大写字母。

cd <projectname>、npm run serve可以启动项目，ctrl + c可以终止项目。

shell

vue create helloworld
cd helloworld
npm run serve
http://127.0.0.1:8080/

shell

vue ui

13.4 项目结构

my-vue-project/
|-- node_modules/                      // 依赖包
|-- public/                            // 静态文件
|   |-- index.html                     // 主页
|-- src/                               // 源代码
|   |-- assets/                        // 资源文件
|   |   |-- logo.png                   // 图片资源
|   |-- components/                    // 组件
|   |   |-- MyComponent.vue            // Vue组件
|   |-- App.vue                        // 根组件
|   |-- main.js                        // 入口js
|-- .babelrc                           // Babel配置文件
|-- .eslintrc.js                       // ESLint配置文件
|-- .gitignore                         // Git忽略文件列表
|-- package.json                       // 项目依赖和配置文件
|-- README.md                          // 项目说明
|-- vue.config.js                      // Vue特定配置（如果有自定义配置）

node_modules：项目依赖的模块

public：该目录下的文件不会被webpack编译压缩，引用的第三方js放这里

favicon.ico：图标文件
index.html：项目的主页面

src：项目代码主目录

assets：项目静态资源，比如CSS、图片
- logo.png：logo图片
components：编写的组件放在这个目录
- HelloWorld.vue：VUE CLI创建的HelloWorld组件
App.vue：项目的根组件
main.js：程序入口js文件，加载各种公共组件和所需用到的插件

.browserslistrc：配置项目目标浏览器范围

.eslintrc.js：ESLint使用的配置文件

.gitignore：配置git提交代码忽略的目录与文件

babel.config.js：babel使用的配置文件（TypeScript转js，ES6转ES5等）

package.json：npm配置文件，设定了脚本和项目依赖的库

package-lock.json：用于锁定项目实际安装的各个npm包的具体来源和版本号

README.md：项目说明文件

13.5 编写一个Hello组件

使用Visual Studio Code打开用vue create或vue ui创建的脚手架项目，在components目录中创建组件MyHello，内容如下：

src\components\MyHello.vue

vue

<template>
    <p>{{ who }}: {{ msg }}</p>
</template>

<script>
export default {
    name: 'MyHello',
    props: {
        msg: String
    },
    data() {
        return {
            who: "李程碑"
        };
    }
}
</script>

<style scoped>
p {
    color: red;
}
</style>

在 src\App.vue 中引入、注册、使用组件。

vue

<template>
  <MyHello msg="你好呀！" />
  <MyHello msg="我很好！" />
</template>

<script>
import MyHello from "@/components/test/MyHello"

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

<style></style>

在菜单栏选择【终端】->【新终端】，输入npm run serve就可以运行项目，之后可通过浏览器访问。

需要注意的是：

组件名称要至少两个单词，使用大驼峰命名，引入时使用自闭合。
导入语句中的@符号表示src目录，用于简化路径的访问。可以不写.vue的扩展名，因为项目内置的webpack能够自动添加后缀.vue。

13.6 package.json

这是个json格式的npm配置文件，定义项目所需要的各种模块，以及项目的配置信息（如名称、版本、许可证等元信息），在项目中经常会修改该文件的配置内容。

json

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  },
  "author": "Your Name",
  "license": "MIT"
}

说明：

name：项目名称。

version：项目版本。

description：项目描述。

main：项目的入口文件。

scripts：定义了各种可执行的脚本命令。

dependencies：项目运行时依赖的包。

devDependencies：项目开发时依赖的包。用于开发环境，不发布到生产环境。

author：项目作者。

license：项目的许可证。

安装依赖

生产环境：

shell

npm install element-ui -S
npm install element-ui --save

安装后会在dependencies中写入依赖项，在项目打包发布时，dependencies中写入的依赖也会一起打包

开发环境：

shell

npm install element-ui -D
npm install element-ui --save-dev

特别注意，发布代码的时候node_modules文件夹不会发布，下载了别人代码后可以在项目根目录下执行npm install命令，该命令会根据package.json文件下载所需要的依赖。

13.7小结

熟练使用脚手架工具，可以快速搭建功能强大、健壮的应用。

第13章 VueCLI ​

13.1 简介 ​

13.3 安装 ​

13.2 创建项目 ​

13.4 项目结构 ​

13.5 编写一个Hello组件 ​

13.6 package.json ​

13.7小结 ​

第13章 VueCLI

13.1 简介

13.3 安装

13.2 创建项目

13.4 项目结构

13.5 编写一个Hello组件

13.6 package.json

13.7小结