一、简介
前端采用Vue.js+element-ui+webpack的架构。
Vue.js 是一套响应式的JavaScript 渐进式框架。Vue.js 自问世以来所受关注度不断提高，在现在的市场上，Vue.js 成为非常流行的 JavaScript 技术开发框架之一。
Vue 只关注视图层， 采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
element-ui是⼀个ui库，它不依赖于vue。但是却是当前和vue配合做项⽬开发的⼀个⽐较好的ui框架。element-ui是最早搭配vue的UI框架，其提供组件较丰富，文档说明简单易懂。
webpack是一个现代的JavaScript应用的模块化打包工具。专注于构建模块化项目，在Webpack眼里一切文件都是模块，通过Loader转换翻译文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。作为Vue的好“基友”，Webpack是Vue最重要的构建打包工具。它关注于模块化的思想，让js的开发变得更加方便。
二、安装Node.js
正式研发前我们需要安装Node.js环境，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，类似于jvm之于java。
vue.js 是通过 webpack来构建，而webpack 又基于npm, npm需要nodejs环境。这就是为什么vue.js 还需要安装nodejs环境。
1、下载Node.js
官网地址：https://nodejs.org/en/download/ 选择对应需要的版本
我本地使用的版本是v14.17.5，下载完成后点击安装，一路下一步安装完成。记录一下安装路径，后面需要配置路径。
2、测试
node -v
npm -v3、配置node
node.js安装路径下创建node_global、node_cache两个文件夹。
管理员权限运行cmd窗口
npm config set prefix "C:\Develop\nodejs\node_global"
npm config set cache "C:\Develop\nodejs\node_cache"查看是否执行成功
npm config get prefix
npm config get cache4、环境变量配置
NODE_PATH = C:\Develop\nodejs\node_modules
path = C:\Develop\nodejs\node_global;C:\Develop\nodejs;三、创建Vue.Js项目
1、安装依赖
#安装VueCLI
npm install --global @vue/cli
npm i -g @vue/cli-init
npm install webpack -g
#安装淘宝镜像
npm install --registry=https://registry.npmmirror.com2、创建项目
#使用webpack模板创建项目
vue init webpack mir_vue
每个步骤提示信息如下：
? Project name (mir_vue) #可以改名字，不改的话回车
? Project description A Vue.js project
? Author dehuisun
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself建议ESLint选择No，选择npm编译。等待安装项目依赖，下载时间可能回有点久，耐心等待一会。创建成功如下图：
3、项目结构
build - 项目构建目录（webpack）相关代码
config - 配置目录 服务端口号等
node_modules - 项目依赖目录
src - 研发目录
assets 样式、图片信息
components 组件目录
router 路由目录
main.js 项目核心文件
App.vue 项目入口文件
static 静态文件目录
test 测试目录
index.html 首页入口页面
package.json 项目配置文件
4、启动项目
可以脚本运行 npm run dev
5、IDEA打开项目
安装vue插件
IDEA File - Setting - Plugins 搜索vue
点击安装，安装成功后，即可看见vue项目。使用IDEA打开刚创建的项目；
package.json右键选择Show npm Script
弹出快捷脚本，双击dev也可运行
浏览器访问：http://127.0.0.1:8080/
四、整合elmentUI
Element - The world's most popular Vue UI framework 官网地址
有多种整合方式，可以在官网查看方法，这里使用常用的npm方式安装
1、npm 安装
npm i element-ui -S
2、引入 Element
在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.prototype.$ELEMENT = { size: 'small' }五、添加自定义页面
1、修改端口
默认8080端口经常会和其他服务冲突，所以修改一个不常用的端口，这里使用9081端口
config/index.js文件中
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, #修改成9081
autoOpenBrowser: false,2、创建新页面
src目录下创建views目录作为页面目录，后续页面在放在这个目录中，当然名字可以自定义。
views目录下创建login.vue文件，作为我们第一个自定义页面。新创建的vue文件如图：
在element官网找到表单组件
参照样例模拟写一个简单的登录页面。
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
pass: '',
},
rules: {
name: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// alert('submit!');
this.$router.push({ path:'/main'})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>另外创建一个简单页面作为登录成功跳转的页面。
<template>
<div>
登录成功
</div>
</template>
<script>
export default {
name: "test"
}
</script>
<style scoped>
</style>3、添加路由
Vue.js 通过路由管理页面URL访问跳转。
在src/router/index.js文件中添加
import login from '@/views/login'
import main from '@/views/test'
const routes = [
{ path: '/login', name:'login',component: login },
{ path: '/main', name:'main',component: main },
{ path: '/', name:'HelloWorld',component: HelloWorld }
]4、访问测试
启动项目，浏览器访问 http://localhost:9081/#/login，如图
输入用户、密码点击登录，可以看到跳转新页面。
第一个前端项目骨架我们就创建完成，后续我们不断丰富这两个项目，实现两个项目前后台联动。
