vue-cli 搭建项目，ElementUI的搭建和使用

        vue-cli 官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

主要的功能

•  - 统一的目录结构
•  - 本地调试
•  - 热部署
•  - 单元测试
•  - 集成打包上线

需要的环境

Node.js
    简单的说 Node.js是一个前端js运行环境或者说是一个 JS 语言解释器。

npm
    npm 是Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。

Node.js安装

    下载

        Node.js — Download Node.js®

    安装

测试

  cmd打开控制台分别输入node -v 和 npm -v

  若显示以下结果则安装成功

使用HbuilderX快速搭建一个vue-cli项目

创建成功后,在命令行窗口启动项目

输入npm run serve命令

或者

右键点击对应项目找到外部命令中也可找到npm run serve命令

启动成功后,会出现访问项目地址:http://127.0.0.1:8080/

在命令行中ctrl+c 可以停止服务

组件路由

    vue router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建 单页面应用变得易如反掌。

    安装

        vue-router 是一个插件包，所以我们还是需要用npm来进行安装的。

        打开命令行工具，进入你的项目目录，输入下面命令。

        npm i vue-router@3.5.3

搭建步骤:

        1. 创建router目录

            创建index.js 文件,在其中配置路由

import Vue from 'vue'; /* 导入vue */
import router from 'vue-router'; /* 导入路由 *//* 导入注册组件 */
import Index from '../Index.vue';
import Login from '../Login.vue';
import Reg from '../Reg.vue';/* 注册 定义组件访问地址 */
Vue.use(router);var rout = new router({routes: [{path:"/",component:Index},{path: '/index',component: Index},{path: '/login',component: Login},{path: '/reg',component: Reg}]});//导出路由对象export default rout;

        2.使用路由

            在<template>标签中使用路由(前提必须要加一个<div>根标签)

<template><!-- 组件模板格式	组件中必须有一个根标签 --><div>首页<router-link to="/login">登录</router-link><router-link to="/reg">注册</router-link>{{ name }}  {{ age }}</div>
</template><script>/* 导出组件 */export default{//定义组件中的数据 datadata(){return{name:"Tom",age:20}},methods:{}}
</script><style>
</style>

    3.在main.js 中配置路由

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//导入组件路由
import router from './router/index.js'Vue.use(router);new Vue({router,render: h => h(App),
}).$mount('#app')

    4.路由导航守卫

    5.路由嵌套

{path: '/main',component: Main, //路由嵌套 在main下面的嵌套子路由children:[{path: '/majorlist',component: MajorList},{path: '/studentlist',component: StudentList}]}

    6.路由传参

ElementUI

          Element，一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库.

安装ElementUI

    在命令行窗口输入以下命令:

    npm i element-ui -S

在 main.js 中写入以下内容：

/* 导入 ElementUI*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

使用Element

    Element网站

    Element - The world's most popular Vue UI framework

在此网站中就可以找到自己所需求的各种组件