飞天班第16节：标准化的前端工程Vue-cli

1、Vue-cli

Vue-cli 是vue官方提供的一个脚手架，可以快速的生成前端的工程模板，类似于spring官方提供的快速搭建SpringBoot工程的套路。

环境安装

# 全局安装 ，可能会报权限错误，uninstall卸载后重新赋予权限再安装
npm install -g vue-cli
# 检查安装是否成功，查看可用的官方模板
vue list

第一个Vue-cli前端工程

1、可以先创建一个vue-cli文件夹，

2、cd到里面执行以下命令创建一个基于webpack模板的前端工程

# 项目名叫myvue
vue init webpack myvue

请注意选择no的选项

3、完善依赖

cd myvue
npm install	# 安装依赖
npm run dev	# 启动项目

4、访问测试

2、Vue-cli目录结构

build和config，webpack配置文件，项目配置文件
node_modules，包模块，这个一般在开源项目不存在，我们拿到项目的第一步就安装依赖npm install才能运行。
src，源码目录
static，静态资源文件目录
.babelrc，babel配置文件，es6语法转换为es5语法
.editorconfig，编辑器配置
.gitignore，git文件忽略配置
.postcssrc.js css 相关的配置文件，就是导入了css的插件
index.html，首页，实际开发中这个文件用不到
package.json 项目的配置文件（名称、版本、描述、作者、依赖、启动脚本）
```
{
  "name": "vuepress-blog",
  "version": "1.0.0",
  "description": "jacob's blog",
  "main": "index.js",
  "repository": "https://gitee.com/jacobmj/vuepress-blog",
  "author": "jacob_xie",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "dependencies": {
    "@vuepress/plugin-medium-zoom": "^1.5.2",
    "@vuepress/plugin-pwa": "^1.5.2",
    "vuepress": "^1.5.2",
    "vuepress-plugin-flowchart": "^1.4.3",
    "vuepress-theme-reco": "^1.6.1",
    "exif-js": "~2.3.0"
  }
}
```
关于package.json中的dependencies的版本中^和~的区别
- ‘~’（波浪符号）:他会更新到当前minor version（也就是中间的那位数字）中最新的版本。放到我们的例子中就是：“exif-js”: “~2.3.0”，这个库会去匹配更新到2.3.x的最新版本，如果出了一个新的版本为2.4.0，则不会自动升级。波浪符号是曾经npm安装时候的默认符号，现在已经变为了插入符号。
- ‘^’（插入符号）: 这个符号就显得非常的灵活了，他将会把当前库的版本更新到当前major version（也就是第一位数字）中最新的版本。放到我们的例子中就是：“vuepress”: “^1.5.2”,这个库会去匹配1.x.x中最新的版本，但是他不会自动更新到2.0.0。

src目录

assets：我们的css,js,image都放这里，

components：我们写的页面组件都放这里，如app-add-or-update.vue，里面可以按业务模块划分文件夹。

main.js：项目的主入口，所有的程序都只有一个主入口，build目录下的webpack.base.conf.js已配置main.js为主入口

// es6语法，导入组件和依赖！
import Vue from 'vue'    // vue 依赖,在node_modules里可以找到vue文件夹
import App from './App'  // 导入组件 App.vue

Vue.config.productionTip = false  // 关闭浏览器控制台关于环境的提示！

/* eslint-disable no-new */
// vue的核心对象
new Vue({
  el: '#app',  // 绑定 index.html的<div id="app"> el元素（DOM节点）,vue对象就是ViewModel模型，el元素就是View模型页面视图
  components: { App },  // 注册组件
  template: '<App/>'  // 使用组件作为模板内容,渲染到index.html的<div id="app">标签内
})

App.vue：

<!-- HTML 代码模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<!--JS 代码 -->
<script>
// JS 代码, 导入我们自己写的模块！
import HelloWorld from './components/HelloWorld'
// 导入对象App，在其他地方导入的话就可以直接使用了！
export default {
  name: 'App',
  components: {
    HelloWorld  // 组件！
  }
}
</script>

<!--CSS 样式： 如果没有加 scoped 就是全局生效，如果增加了就是当前页面生效！-->
<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>

3、标准的路由

项目中安装vue-router

npm install vue-routuer

测试

components目录下定义组件content.vue

<template>
  <div>
    <h2>内容页</h2>
  </div>
</template>

<script>
export default {
  name: "Content"
}
</script>

定义组件main.vue

<template>
  <div>
    <h2>主页</h2>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

2.编写安装路由

src目录新建一个router文件夹，新建路由配置文件index.js，内容如下：

// 导入Vue
import Vue from 'vue'
// 导入我们的路由组件
import Router from 'vue-router'
// 显示的调用Vue路由
Vue.use(Router);

// 导入我们自己写的组件, 不需要增加 .vue 后缀！
import Content from '../components/content'
import Main from '../components/main'

// 配置路由
export default new Router({
  // 就是我们上周讲的
  routes: [
    // 规则1 , content 内容页跳转规则！
    {
      path: '/content',
      name: 'content',
      component: Content
    },
    // 规则2
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
})

3.main.js中配置路由

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

Vue.config.productionTip = false

// 导入我们的路由规则, 自动识别 index.js
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 挂载路由！
  components: { App },
  template: '<App/>'
})

4.App.vue中使用content.vue和main.vue

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <!-- 出口，展现路由内容的地方！ -->
    <router-view></router-view>
  </div>
</template>

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

执行npm run dev ,浏览器访问：

点击“首页”、“内容”，地址栏都会发生变化，路由可以正常跳转

404配置

编写组件404.vue,在router/index.js 配置路由

// 引入404组件
import NotFound from '../components/404'


// routes下增加路由，关于404，路由会优先匹配精准的，然后匹配通用！
{
    path: '*',
    component: NotFound
}

随便访问一个不存在的路由：

路由模式

分为两种：

hash: 路径会带#号，默认模式
history: 不带 # 号，也就是我们常常看见的网页路由

路由配置文件index.js ,修改路由为history模式

export default new Router({
  mode: 'history',
  routes: []
}

4、Element-ui

ui 库，Element-ui 是饿了么出品的基于 Vue.js 的后台组件库！

官网：https://element.eleme.cn/#/zh-CN

自己看官方文档了解，需要用到的时候记得有那样的组件就可以了。

5、Vue-element-admin

Vue-element-admin 是一款基于 element-ui的后台管理的集成解决方案，使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型。

官网：https://panjiachen.github.io/vue-element-admin-site/zh/

完整版vue-element-admin
基础版vue-admin-template

1、我们在平时使用vue-element-admin 开发的时候，这个完整版的后台脚手架，当做一个工具库！需要什么我们拿来使用即可！

2、我们使用 vue-admin-templeate开发！

编写自己的组件
注册路由！
后面的就是和 api 进行通信传输数据！

如何分析项目

1、查看 config index.js 知道项目的基本配置

2、查看main.js、查看导入了哪些组件

3、查看路由配置文件，寻找到所有的页面组件！