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');