Vue高级实战

什么是Vue-cli

• Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
• Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 “零配置”的项目环境搭建

安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

安装Node.js

安装了node.js才有使用npm ，才能安装vue-cli

安装NPM

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

安装vue-cli

目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目
注意: 以管理员身份打开命令行

快速构建Vue项目

步骤说明

1. 桌面创建一个空的文件夹
2. 以管理员身份运行cmd , 进入到vueTest文件夹
3. 执行下面的命令

1.基于交互式命令方式,创建项目 
//文件名 不支持驼峰（含大写字母）使用短横线方式 
vue create my-project
复制代码

4. 选择自定义安装,点击回车
5. 在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车
6. 按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)
7. 选择项目配置文件单独存放
8. 是否保存模板,选择n 不创建
9. 安装完成,提示输入执行下面这两个命令
10. 首先进入项目目录
11. 启动项目

npm run serve
复制代码

12. 访问项目: http://localhost:8080/
13. 停止项目 只要关闭命令行窗口就可以

项目结构介绍

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

Vue脚手架自定义配置

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

{ 
    //1.项目基本信息 
    "name": "project3", 
    "version": "0.1.0", 
    "private": true, 
    
    //2.指定运行脚本命令 
    "scripts": { 
        "serve": "vue-cli-service serve", 
        "build": "vue-cli-service build" 
    },
    
    //4.生产环境所依赖模块的版本 
    "dependencies": { 
        "core-js": "^3.6.5", 
        "vue": "^2.6.11", 
        "vue-router": "^3.2.0" 
    },
    
    //5.本地环境开发所依赖的版本 
    "devDependencies": { 
        "@vue/cli-plugin-babel": "~4.4.0", 
        "@vue/cli-plugin-router": "~4.4.0", 
        "@vue/cli-service": "~4.4.0", 
        "vue-template-compiler": "^2.6.11" 
     } 
}
复制代码

• 通过package.json 配置项目
  配置内容采用JSON格式,所有的内容都用双引号包裹
  打开package.json,再最末端添加如下配置:

"vue":{ 
    "devServer":{ 
        "port":"8888", 
        "open":true 
    } 
}
复制代码

• 配置说明: 该配置设置打包时服务器相关的信息
  • port : 访问端口
  • open true: 打包完成自动打开浏览器
• 单独的配置文件配置项目
  1. 在项目的根目录创建文件 vue.config.js
  2. 删除掉package中新添加的配置项. 3. 在vue.config.js 文件中进行相关配置

module.exports = { 
    devServer:{ 
        open:true 
        port:8889 
    }
}
复制代码

Vue 组件化开发

• 组件化开发
  组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。 我们主要的工作就是开发的组件
• 组件介绍
  1. 我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件.每一个*.vue 文件都是一个组件 ，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。
  2. 常见的组件：
     • 页面级别的组件
       • 页面级别的组件，通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面
     • 业务上可复用的基础组件
       • 这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目录下，然后通过import在各个页面中使用
  3. 组件的组成部分
     • template : 组件的HTML部分
     • script: 组件的JS脚本 (使用ES6语法编写)
     • style: 组件的CSS样式

项目运行流程

main.js

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

App.vue

2. App.vue 是vue项目的主组件，是页面入口文件 ，所有页面都是在App.vue下进行切换的

router 路由

3. 找到路由文件,来看一下具体的路由配置

Home.vue组件

1. 默认访问的是Home.vue 首页

Element-UI

Element-UI介绍

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
Element-UI官方站点：
element.eleme.cn/#/zh-CN

Element-UI使用

• 命令行方式安装
  1. 创建 一个新的项目
  2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令

npm i element-ui -S
复制代码

• 打开 main.js , 导入Element-UI 相关资源
  main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、 VueRouter等。

//导入组件库 
import ElementUI from 'element-ui' 

//导入组件相关样式 
import 'element-ui/lib/theme-chalk/index.css' 

//配置Vue插件 将El安装到Vue上 
Vue.use(ElementUI);
复制代码

• 复制Element 按钮样式 到app.vue文件的 template下

<template> 
    <div id="app"> 
        <!-- 测试elementUI --> 
        <el-row> 
            <el-button>默认按钮</el-button> 
            <el-button type="primary">主要按钮</el-button> 
            <el-button type="success">成功按钮</el-button> 
            <el-button type="info">信息按钮</el-button> 
            <el-button type="warning">警告按钮</el-button> 
            <el-button type="danger">危险按钮</el-button> 
        </el-row> 
    
        <div id="nav"> 
            <router-link to="/">Home</router-link>| 
            <router-link to="/about">About</router-link> 
        </div> 
        <router-view /> 
     </div> 
</template>
复制代码

• 启动项目 npm run serve, 查看页面

Vue-CLI工程改造

1. 删除components 目录下的 HelloWord.vue组件
2. 删除App.vue中的部分内容,只保留如下部分

<template> 
    <div id="app"></div> 
</template> 

<style> 
</style>
复制代码

3. 删除router文件下的路由文件 index.js部分内容,只保留如下部分

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 
    
    const routes = [ 
    
    ]
const router = new VueRouter({ 
    routes 
})

export default router
复制代码

4. 删除views目录下的 About.vue 与 Home.vue

安装axios

1. npm安装：使用npm下载axios包

npm i axios
复制代码

2. 在main.js文件中导入axios 相关资源

//引入axios 
import axios from 'axios' 

//Vue对象使用axios 
Vue.prototype.axios = axios;
复制代码