教育平台项目前端：Vue.js 高级

Vue-cli

What is Vue-cli?

Vue cli 是基于 Vue 的应用开发提供的一个标准的脚手架工具，为应用搭建基础的框架结构，提供插件、开发服务、Preset、构建打包功能。

Vue cli 背后集成了现代化开发的诸多功能，通过简单的命令就可以完成"零配置"的项目环境搭建。

安装 Vue-cli 步骤

在安装 vue-cli 前，要确认是否安装了 nodejs 和 npm。

Node.js

node.js：传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8；Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用 javascript 去编写一些服务端的程序，实现了用 javaScript 去开发 Apache + PHP 以及 Java Servlet 所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份 js 程序就可以运行在前端和服务端，这样比一个应用使用多种语言在开发效率上要高。node.js 基于事件驱动机制，在特定领域性能出色，比如用 node.js 实现消息推送、状态监控等的业务功能非常合适。

下载安装 node.js：https://nodejs.org/en/download/

显示当前 node.js 的版本：

node -v

NPM

npm：全称 Node Package Manager，他是 node 包管理和分发的工具，使用 NPM 可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具 maven 的依赖管理功能差不多，通过 NPM 可以很方便地下载 js 库，打包 js 文件。

安装 NPM：node.js 已经集成了 NPM 工具

查看当前 NPM 版本：

npm -v

查看包管理路径

包路径就是 NPM 从远程下载的 js 包所存放的路径。查询NPM管理包路径（NPM 下载的依赖包所存放的路径）：

npm config ls

设置包管理路径

为了方便对依赖包管理，我们将管理包的路径设置在单独的地方，设置为自定义的包管理路径：

npm config set prefix "E:\nodejs_package\npm_modules"
npm config set cache "E:\nodejs_package\npm_cache"

NPM 环境变量配置

添加新的系统变量: key=NODE_HOME，value=E:\nodejs_package

Path 中添加 %NODE_HOME%\npm_modules

安装 cnpm

NPM 默认会去国外的镜像去下载 js 包，在开发中通常使用国内镜像，这里使用淘宝镜像

// 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 查看cnpm 的版本
cnpm -v

安装 Vue-cli

目前主流版本是 2.x 和 3.x 版本，安装 3.x 以上的版本是因为该版本既可以创建 2.x 项目与 3.x 项目。

以管理员身份打开命令行，执行安装命令：

npm install -g @vue/cli

查看版本：

vue -V

快速构建 Vue 项目

步骤说明

1. 创建一个空的文件夹 vueTest

2. 以管理员身份运行 cmd，进入到 vueTest 文件夹

3. 执行下面的命令（文件名不支持驼峰的大写字母，只能使用短横线方式）

vue create my-project

4. 选择自定义安装，点击回车

5. 在列表中选择要安装的组件，使用空格键选择，选好后回车

6. 按回车之后，提示选择什么模式的路由，这里输入 n（表示选择 hash 模式）

7. 选择项目配置文件单独存放

8. 是否保存模板，选择 n 不创建

9. 进入项目目录：cd my-project

10. 启动项目：npm run serve

11. 访问项目: http://localhost:8080/

12. 停止项目：只要关闭命令行窗口就可以

导入 Vue 项目到 VS Code

1. VS Code 中右键选择打开文件夹
2. 选择桌面上的项目
3. 打开项目可以看到如下项目结构

|--- my-project 项目名称
    |--- node_modules 存放依赖包的目录
    |--- public       静态资源管理目录
    |--- src          组件源码目录 (我们写的代码)
        |--- assets     存放静态图片资源 (CSS也可以放在这里)
        |--- components 业务上可复用的基础组件 (一个页面可以看做一个组件)
        |--- router     存放了项目路由文件
        |--- views      放置的为公共组件 (主要还是各个主要页面)
        |--- App.vue    可以当做是网站首页，是一个 vue 项目的主组件，页面入口文件
        |--- main.js    打包运行的入口文件，引入了vue 模块和 app.vue 组件以及路由 route
    |--- babel.config.js     Babel 配置文件, 对源代码进行转码 (把 es6 => es5)
    |--- package.json        项目及工具的依赖配置文件
    |--- paxkage-lock.json   依赖配置文件
    |--- README.md           项目说明

Vue 脚手架自定义配置

• package.json 介绍

每个项目的根目录下面都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
   
    // 项目基本信息
    "name": "my-project1",
    "version": "0.1.0",
    "private": true,

    // 指定运行脚本命令
    "scripts": {
   
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    
    // 生产环境所依赖模块的版本
    "dependencies": {
   
        "core-js": "^3.6.5",
        "vue": "^3.0.0-0",
        "vue-router": "^4.0.0-0"
    },
    
    // 本地环境开发所依赖的版本
    "devDependencies": {
   
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0-0"
    }
    
    // 自定义配置
}

• 通过 package.json 配置项目

配置内容采用 JSON 格式，所有的内容都用双引号包裹

该配置设置打包时服务器相关的信息： port - 访问端口， open - 打包完成是否自动打开浏览器

// 自定义配置  
"vue": {
   
    "devServer": {
   
        "port": "8888",
        "open": true
    }
}

注意：不推荐这种方式，因为 package.json 主要是用来管理包的配置信息。为了方便维护，将 Vue 脚手架相关的配置单独定义到 vue.config.js 配置文件中。

• 单独的配置文件配置项目

在项目的根目录创建文件 vue.config.js

删除掉 package.json 中新添加的配置项

在 vue.config.js 文件中进行相关配置：

module.exports = {
   
   devServer:{
   
       open:true,
       port:8889
   }
}

Vue 组件化开发

组件化是 Vue 的精髓，Vue 项目就是由一个一个的组件构成的，我们主要的工作就是开发的组件。

用 vue-cli 脚手架搭建的项目里面有很多如 index.vue 或者 App.vue 这一类的文件。

每一个 .vue 文件都是一个组件 ，是一个自定义的文件类型，比如 App.vue 就是整个项目的根组件。

常见的组件：

• 页面级别的组件：通常是 views 目录下的 .vue 组件，是组成整个项目的各个主要页面 。
• 业务上可复用的基础组件：这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目录下，然后通过 import 在各个页面中使用。

组件的组成部分：

• template：组件的 HTML 部分
• script：组件的 JS 脚本（使用 ES6 语法编写）
• style：组件的 CSS 样式

<!--  template 代表 html 结构, template中的内容必须有且只有一个根元素编写页面静态部分，就是 view 部分 -->
<template>
<div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<!-- 编写 vue.js 代码 -->
<script>
    // 可以导入其组件
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    // 默认写法, 输出该组件
    export default {
        // 组件名称，用于以后路由跳转
        name: 'Home',
        // 当前组件中需要使用的数据
		data() {
            return {}
        },
        methods: {},
        components: {
            HelloWorld
        }
    }
</script>

<!-- scoped 表示当前的样式只作用与当前组件中的 template 视图 -->
<style scoped>
    /* 页面样式  加上scoped 表示样式就只在当前组件有效*/
</style>

项目运行流程

项目运行会加载入口文件 main.js

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

// 关闭启动提示
Vue.config.productionTip =