vue-cli
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义
好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。
主要功能
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
需要的环境
Node.js
简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。
npm
npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
下载地址
https://nodejs.org/en/download
下载成功后输入以下指令进行测试
这样就算安装成功，如果你的npm下载组件有问题建议换成华为的镜像源输入以下指令即可
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
使用HbuilderX搭建一个vue-cli项目
创建一个这样的项目，创建成功后在命令行窗口启动项目
输入命令npm run serve
启动成功后,会出现访问项目地址:http://127.0.0.1:8080/
在命令行中 ctrl+c 停止服务
也可以右键项目选择外部命令里面的npm run serve
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建
单页面应用变得易如反掌。
安装
vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm i vue-router@3.5.3搭建步骤
1.创建router目录
创建 index.js 文件,在其中配置路由
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: [
{
// 网页打开直接访问这个组件，component后面的名字必须与导入的组件名字相同
path:'/',
component:login
},
{
path:'/login',
component:login
},
{
path:'/Main',
component:Main
}
]
});
// 导出组件
export default rout;组件都是.vue文件，有两个组件
<!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同
内容都写在一个template标签中,
template标签必须有一个根标签
-->
<template>
<div class="login_container">
<!-- 登录盒子-->
<div class="login_box">
<!-- 头像盒子-->
<div class="img_box">
<img src="./assets/logo.png" />
</div>
<!-- 登录表单-->
<div style="margin-top: 100px;padding-right: 20px;">
<el-form ref="form" label-width="80px">
<el-form-item label="账号">
<el-input v-model="account" ></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login()">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
/* 导出组件,并为组件定义数据,函数,生命周期函数 */
export default{
data(){
return{
account:"",
password:""
}
},
methods:{
login(){
//前端验证账号和密码不能为空
if(this.account.length==0){
this.$message({ message: '账号不能为空!',type: 'warning'});
return;
}
if(this.password.length==0){
this.$message({ message: '密码不能为空!',type: 'warning'});
return;
}
//与后端交互
//后端向应一个结果
this.$router.push("/main");
}
}
}
</script>
<style>
.login_container{
height: 100vh;
margin: 0px;
padding: 0px;
background-image: url(assets/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.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><template>
<div>
登录成功
</div>
</template>
<script>
</script>
<style>
</style>2.在Main.js配备路由
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入组件
import router from './router/index.js'
Vue.use(router);
//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
new Vue({
render: h => h(App),
router,
}).$mount('#app')
3.使用路由(App.vue)
<template>
<div id="app">
<!-- 显示组件 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
}
</style>
elementUI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库.
安装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);
new Vue({
render: h => h(App),
}).$mount('#app');
