前言
前面我们说的都是一些后台的事情，但是，其实我真正的弱项是前台。这里，我们就把前台的进程线路拉出来，开始推进。其实我之前写过两篇关于vue项目搭建的文章。但是，我这次遵照原来的文章更进行操作，虽然大体是通的，但是，一个事情分成了两篇文章，有些东西也存在问题。所以，这篇文章会从头开始讨论这些问题，完了，前两篇我会考虑删除掉。
构建
环境搭建
安装npm
我们这次编写的vue是基于前端工程化的，构建工具用的是webpack，所以我们需要安装npm。npm是nodejs自带的包管理工具，所以，安装nodejs会自带安装npm的。下载地址：https://nodejs.org/en/ 我下载的版本是：10.14.2 LTS npm的版本是6.4.1 我的操作系统是windows10，我写代码用的是vs code。安装是很简单的事，这里就不赘述了。安装完成后，npm命令就可以使用了。npm -v 可以查看具体的npm版本号。
新建项目
首先，找个地方新建个目录，我建的叫management-platform-web，有点长，以后我就叫项目目录嘛。然后，打开命令行，进入项目目录。
npm init
然后根据提示输入信息，懒得写也可以一路回车。然后就会看到一个叫做package.json的文件。刚才的信息都在这个文件里。这时候，npm管理的项目就初始化好了，接下来我们执行的命令都需要在这个目录下执行。
npm i webpack vue vue-loader
这个是安装webpack、vue、vue-loader三个包，webpack这时是安装在该目录下的，主要确保版本一致，不受别的项目影响。我们这个项目的核心框架是vue和vue-loader。
安装完成后要注意看警告信息。其中一个说的是vue-loader依赖于css-loader。还有一个可选安装向是fsevents，但是被跳过了，因为这个包只支持ios操作系统，所以，我们接下来安装css-loader
npm i css-loader
基础的依赖装好了，我们接下来就可以写代码了。目录结构如下
+src
--index.js
--app.vue
-+view
---login.vue
---sidebar.vue
---workbench.vue
-package.json
-webpack.config.js
我们这篇博客内容覆盖的文件大概如上所述，我们来大概介绍一下。
webpack.config.js
这个文件是用来进行webpack配置的，我们可以进去看一下它里面的内容，具体的解释，注意看注释：
const path=require('path') //获取项目目录用的变量，path是nodejs的基本包
const VueLoaderPlugin = require('vue-loader/lib/plugin') //vueloader插件，后面进行初始化需要用带该变量。
const HTMLPlugin=require('html-webpack-plugin') //使每次生成的html文件带有hash值，来确保缓存刷新
const webpack=require('webpack') //webpack变量
//根据环境变量判断是否是开发环境
const isDev= process.env.NODE_ENV==='dev' //环境变量，如果是dev环境的话则在配置构建的时候添加开发环境的相关配置
const config={
devtool: 'cheap-module-eval-source-map', //source map配置，可以让我们在调试的时候看到编译前的文件并进行断点调试
target: 'web', //webpack的编译目标，编译为类浏览器环境执行的文件，这也是默认值
entry: path.join(__dirname,'src/index.js'), //编译的入口文件，由此文件一层依赖一层依赖得向下进行编译
output:{
filename:'boundle.js', //编译后的js文件名称
path: path.join(__dirname,"dist") //生成文件的目标目录
},
module:{
rules: [
//vue扩展名文件使用vue-loader进行解析
{
test: /\.vue$/,
loader: 'vue-loader'
},
//css扩展名文件使用css-loader进行解析，然后用style-loader将对应的内容加到style标签上，注意两个loader的顺序
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
//静态资源加载使用url-loader进行加载
{
test:/\.(gif|jpg|jpeg|png|svg|ttf|woff)$/,
use:[
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
]
}
]
},
//注册plugin
plugins: [
new VueLoaderPlugin(),
new HTMLPlugin(),
new webpack.DefinePlugin({
'process.env':{
NODE_ENV: isDev?'"dev"': '"prod"'
}
})
]
}
//如果是开发环境，则添加关于webpack-dev-server的相关配置
if(isDev){
config.devServer={
port: '8000',
host: '0.0.0.0',
overlay:{
errors: true, //如果出错则显示在网页上
},
hot: true
};
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),//热更新
new webpack.NoEmitOnErrorsPlugin() //有错也不中断编译
)
}
module.exports=config;
package.json
这个里面我们暂时只需要关心scripts节点，因为只有这个是我们自己配的，别的都是命令自动维护的。下面我就只展示 scripts节点了，它是和dependencies节点同一级的：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_EVN=prod webpack --config webpack.config.js",
"dev": "cross-env NODE_EVN=dev webpack-dev-server --history-api-fallback --config webpack.config.js"
},
其中，build是构建产险环境的代码，cross-env是我们用来传输环境变量的插件。dev是启动webpack-dev-server进行调试的命令，其中–history-api-fallback是我们建立但也应用需要的一个配置，该配置会将所有的请求解析到入口页面，正式部署的时候也需要做相应的配置。
index.js
在配置文件中我们可以看到，这是我们的入口文件。我们先看这个文件的内容吧
import Vue from 'vue'; //vue核心库
import App from './app.vue'; //主应用
import VueRouter from 'vue-router'; //单页应用路由库
import ElementUI from 'element-ui'; //element-ui库
import 'element-ui/lib/theme-chalk/index.css'; //element-ui样式
Vue.use(ElementUI); //在vue中引入elementUI
Vue.use(VueRouter); //在vue中引入VueRouter
//初始化根元素
const root=document.createElement('div');
document.body.appendChild(root)
//初始化路由
const Routers=[
{
path:'/index',
component: (resolve) => require(['./view/workbench.vue'],resolve)
},
{
path:'*',
redirect: '/index'
}
];
//路由配置
const RouterConfig={
mode: 'history',
routes:Routers
};
//构建路由对象
const router=new VueRouter(RouterConfig);
//初始化应用
new Vue({
router: router,
render: (h) => h(App)
}).$mount(root) //将vue组件挂载到root元素上
以上应用代码其实也不难理解，整体流程大概就是，声明要引入的依赖，然后向Vue中引入需要引入的库，再初始化路由和主页面。这里说下VueRouter，因为我们要写的程序是单页应用，所以，页面的路由就变成了前端路由，而不是以前url请求过后，经由nginx或者java进程路由到不同的静态文件或者不同的java controller中。这次的过程是，不同的请求到nginx，都路由到一个地址，然后这个地址自己根据自己的知识进行路由，也就是这个路由的过程发生在用户的浏览器中。好坏呢，我也不好说，毕竟我不是专业前端。但是，至少我在entry中不用写多个文件了。而且，由于由前端统一管理路由，那么整个前端就可以更加统一得管理自己的状态了，这似乎，是我比较喜欢的编程模式。
再说这个root元素。其实，就是创建一个页面，在上面放一个div，然后再挂在一个Vue应用到这个div上，Vue应用层层嵌套，就此展开整个网站。这里可以看到，render挂在的是App这个应用，这就是我们的主页应用了。至于render的具体定位，我还没学多深，不好在这里总结。
我们这里的界面控件主要使用的是element-ui，原因嘛，我一个前端朋友推荐的，具体我就不好说了，反正不会太坑。而且之前我们在公司尝试使用vue为主框架，选型ui框架的时候，由于各种表格的奇葩需求，对可控性要求极高，最终element-ui依然可以完成，所以，先用，应该不会坑。
app.vue
在index.js中，我们看到了，最先访问的是app这个应用，那么，这个应用就在app.vue里面实现的。vue这个扩展名，是vue自己的，由vue-loader解析生成最终的静态文件，我们先看看它的代码：
<template>
<div>
<el-row v-if="isLogined()" v-bind:style="{height: clientHeight}">
<el-col :span="4" style="height:100%">
<SideBar></SideBar>
</el-col>
<el-col :span="20" style="height:100%">
<router-view></router-view>
</el-col>
</el-row>
<div v-else v-bind:style="{height: clientHeight}">
<Login></Login>
</div>
</div>
</template>
<script>
import vSidebar from './view/sidebar.vue'
import vLogin from './view/login.vue'
export default{
components:{
SideBar:vSidebar,
Login:vLogin
},
data(){
return {
//显示区域的高度，用来动态设置全局的高度，以确保内容总是可以铺满全屏
clientHeight:'',
}
},
mounted(){
var vm=this;
//获取显示器可是区域高度，设置到el-row
this.clientHeight = window.innerHeight+"px";
window.onresize = function temp() {
vm.clientHeight = window.innerHeight+"px";
console.log(vm.clientHeight);
};
},
methods:{
isLogined:function(){
return false;
}
}
}
</script>
<style>
html, body{
margin: 0;
padding: 0;
height: 100%;
}
</style>
我们先来看下这个文件的基本结构。首先，它是由template、script、style这三个标签构成的，它们依次描述了这个组件长什么样子、怎么运行以及样式是什么样的。
template里面只能有一个根元素，多个会报错。其中的占位符，语法什么的，可以参考官网说明文档，并不是很复杂。而我用到的el-row和el-col是element-ui的布局控件，方便布局。我们这个app在页面逻辑上，其实很简单。如果用户已经登录了，则显示主界面，否则显示登录界面。主界面由sidebar和路由的界面共同组成，router-view这个控件就是VueRouter提供的控件，会根据url进行路由，而且仅路由占位的部分。方便好用，我们再回忆下index.js中，我们似乎把所有的路径都路由到了workbench.vue，这是我们现阶段的简化设置。
script中的内容也不难，具体的写法，大家可以参考官网对vue编程的说明。我们这里仅解释程序中的意思。首先，我们import了自己写的其它的组件，而element-ui虽然有使用但没有引用的原因是我们在index中的那句Use调用。在export中，components中的组件名称，就是template中的引用需要使用的标记的名称；data会返回该组件中定义的属性；mounted会在页面加载完成后执行，相当于onload事件；methods是定义的各个方法。
style则是组件中使用的样式。如果在标签中加入了scoped，则只在该组件中生效，否则全局生效，后面我们会见到相应的例子。
sidbar.vue
这个是我为主页的左边栏设计的一个组件，未来会在这里加入用户当前信息呀、菜单呀什么的，现在里面啥都没有，就单纯的示意一下界面而已。
<template>
<div class="sidebar"> this is sidebar</div>
</template>
<script>
</script>
<style scoped>
.sidebar{
background-color:blue;
width: 100%;
height:100%;
}
</style>
login.vue
这是登录界面，我只是绘制了一个简单的样子，以示区别，具体交互，后面再说。
<template>
<div class='login-region'>
<el-row>
<span class="login-title">Ntbrick后台管理系统</span>
</el-row>
<el-row>
<el-input v-model="input" placeholder="请输入用户名"></el-input>
</el-row>
<el-row>
<el-input v-model="input" type="password" placeholder="请输入密码"></el-input>
</el-row>
<el-row>
<el-button class="login-button" type="primary">登录</el-button>
</el-row>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
.login-region{
border: 1px solid #0F0F11;
width: 300px;
border-radius: 25px;
margin-left:30%;
margin-top:10%;
text-align: center;
padding:10px;
}
.el-row{
padding:5px;
}
.login-title{
width: 100%;
font-size:x-large;
}
.login-button{
width: 100%;
}
</style>
调试
上面我是介绍了我这次使用的代码，其实写这些代码并不是一蹴而就，但是如果按照我解决问题的顺序来写的话，一是我已经记得不是很清楚了，另外就是篇幅过长，所以这就直接展示结果并加以说明了。但是，代码中大家应该是有疑惑的，很多东西我们都没装。的确，因为我安装的过程都是没有就装，所以让我列个列表也是不好弄的，所以，我们就编译，按照提示来就好。
npm run build
尝试的过程我就不说了，这里就罗列都需要装哪些包吧：cross-env,webpack-cli,html-webpack-plugin,vue-router,element-ui,vue-template-compiler,style-loader,url-loader,file-loader,webpack-dev-server
这个时候尝试运行：
npm run dev
就可以看到成功的日志了。通过更改isLogined返回是true还是false就可以控制是进入主页面还是登录页面了。打开f12，可以看到webpack提供的源码，可以打断点进行调试。基础项目搭建到到此结束，接下来我们有两件事要做：1、添加登录，让登录从现在写死变成真的；2、把主界面丰富起来，左边的sidebar也完整起来。敬请期待后续的博文。