Vue-Cli

目录

vue-cli搭建项目

需要的环境

组件路由

ElementUI

---

vue-cli搭建项目

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

主要功能:

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

需要的环境

Node.js:Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

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

快速搭建一个vue-cli项目:

1.使用HbuilderX,创建一个新的普通项目,选择(2.6.10)版本

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

3.启动成功后,会出现访问项目地址 Local:  http://localhost:8080/

组件路由

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

安装步骤:

1.通过npm来安装,打开命令行工具:Windows+R,输入cmd

2.输入以下命令: npm i vue-router@3.5.3

搭建步骤:

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

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */

/* 导入注册我们自己的组件 */
import Login from "../Login.vue"; 
import Main from "../Main.vue"; 
Vue.use(router)

/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/main',
component: Main
}
]
});

//导出路由对象
export default rout;

2.使用路由

3.在main.js中配置路由

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

import router from './router/index.js'
Vue.use(router);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

ElementUI

安装 ElementUI:npm i element-ui -S

在main.js中写

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

Login.vue

<div class="login_container">
		     <!-- 登录盒子-->
		     <div class="login_box">
		          <!-- 头像盒子-->
		          <div class="img_box">
		                <img src="./assets/logo.png" />
						</div>

<style>
	.login_container{
	  height: 100vh;
	  margin: 0px;
	  padding: 0px;
	  background-image:url(assets/bg.jpg);
	}
	
	  .login_box{
	    width: 450px;
	    height: 350px;
	    background-color: #fff;
	    border-radius: 10px;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
		  opacity: 0.95;
	  }
	
	  .img_box{
	     width: 130px;
	     height: 130px;
	     position: absolute;
	     left: 50%;
	     transform: translate(-50%,-50%);
	     background-color: #fff;
	     border-radius: 50%;
	     padding: 5px;
	     border: 1px solid #eee;
	  }
	  
	  .img_box img{
	       width: 100%;
	       height: 100%;
	       border-radius: 50%;
	       background-color: #eee;
	   }
</style>

可以在ElementUI组件中选择自己想要的效果