Vue-Cli项目搭建

一 引入

        传统web项目一个页面是一个HTML，各文件间相互独立，要进行一个公共操作所需工作量大，因此学习新的架构思想--Vue-cli是一种单页面架构 + 组件,一个项目中最终只有一个html文件, 在html页面中可以切换不同的组件。

什么是vue-cli？有什么作用？

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

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

二 搭建 vue-cli

1.搭建vue-cli需要的前端运行环境

Node.js : Node.js 就是运行在服务端的 JavaScript。它是一个基于 Chrome JavaScript 运行时建立的一个平台，是一个事件驱动 I/O 服务端 JavaScript 环境，速度非常快，性能非常好。

npm : npm 是 Node.js 的包管理工具，可安装各种 Node.js 的扩展。可共享其他开发人员的代码。

2.搭建vue-cli步骤

1）安装Node.js

http://nodejs.cn/download/(最新版)

https://nodejs.org/zh-cn/download/releases/(以往版本)

下载16.19.1版（长期支持版本）

2）在HbuilderX中创建一个vue-cli项目 

 

导入组件

创建组件

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成。

安装

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

打开命令行工具，输入项目目录，输入下列命令：
npm  install  vue-router --save-dev
搭建步骤
1、创建router目录
创建 index.js 文件,在其中配置路由

2。使用路由导入组建

3.在main.js中配置路由组件

4.在app.vue中添加一个<routter-view>用来切换不同组件

../上一级文件./相当于this.

ElementUI提供桌面组件依靠vue2.0

ElementUI

1.下载ElementUI

npm i element-ui -S

2.在main.js中配置elementUI

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

3.在登陆组件中，借助elementUi表单组件，生成登录表单