vue.js+iview+node.js 前端快速开发框架搭建实战
Posted 谷谷微说
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js+iview+node.js 前端快速开发框架搭建实战相关的知识，希望对你有一定的参考价值。
教程
你的指尖有改变世界的力量
上次我们搭建完了基础部分，今天我们就正式开始了，在开始之前，我想就框架的选择这个老话题，发表下个人的看法。
首先我们应该抱着一种存在即合理的态度去看待他们，凡事都有两面性，只要你觉得这个框架能解决你的问题，适合你的项目，那就是好的，即使他没有什么名气。
前端的选择恐惧症
A framework is a set of cooperating classes that make up a reusable design for a specific class of software。（一个框架，就是一组相互协作的类，对于特定的一类软件，框架构成了一种可重用的设计）—《设计模式》
年轻的程序员都是好奇的猫，玩过一个又一个的框架。从毛线球上扯出一条条的线，玩啊玩，最后这一个个的框架在脑子里搅成了浆糊。
是啊，有了太多的选择，其实是一件麻烦的事；没有选择时，是一件更麻烦的事；只有一个选择，那么事情会变得超级简单。而恰巧我们都是来解决麻烦的，那么你必须利用你的经验和实践去选择一个最适合的，那么怎么才算适合呢？我大概罗列了这么几点，仅供参考。
团队的资源
项目的类型
面对的用户
上线的时间
第一点：团队的资源
如果你的团队人数不多，而且水平有限的话，那么选择一款成熟，易上手，学习资料丰富的框架相对好一些，毕竟你不想入坑后出不来，还没人拉，是吧。
第二点：项目类型
项目类型决定了你选用怎么样框。大众网站要选兼容性好的，管理系统要选组件丰富的，移动端要选性能稳定的等等。每个项目有不同的特点，每个框架，每种语言也是一样的，他们都有自己擅长的，也有短板，你只有了解了他的缺点，才会用的得心应手。
第三点：面对的用户
这个不难理解，就是我们做出来的东西是给谁用的？这里我们大致分为三类：
公众用户 2.内部用户 3.特定人群
公众用户的特点是什么？就是多、杂，这时候兼容性是必须要考虑的，既要考虑高版本用户，也要照顾低版本用户，否则一个体验不好，就会造成用户流失，毕竟现在生活节奏这么快，选择又很多，如果不是必要，谁会去忍受你的懒惰。所以这时候在选择框架时，那些个不兼容低版本浏览器的框架风险很高，这时候，不求新，但求稳。除非他提供了完美的兼容方案。或者只能做两套不同的方案，一套面对高版本浏览器，一套面对低版本浏览器，其实这样维护起来成本也是很高的。
内部用户相对来说好解决一些，毕竟自家人关起门来商量着解决呗。这时候可以尝试着使用一些口碑好，效率高、技术新、组件化的框架。
特定人群这个怎么说呢，内部用户属于特定人群，但是特定人群绝对大于内部用户，且小于公众用户。这又怎么讲呢，比如说：小孩，老人，妇女，IT人员等等，都属于公众用户里的特定人群，这些用户有些可以用框架解决，有些必须要自己造车轮。因为他们需要更为细致和高度定制化的体验和功能，有时候还真不是一两套框架搭配一些个组件就能解决的。
第四点：上线时间
用几星期的时间来做一个项目，我首先想到的会是找一个模板。
用几个月的时候来做一个项目，我会想到找一个框架。
用几个年的时间来做一个项目，我会想着是不是可以造几个轮子。
这是一条傲娇的分割线
我们言归正传，上节我们使用node和vue-cli快速搭建了一个可运行的管理系统基础结构，但却是很简陋的，就像我们新买的毛坯房。今天我们就在原有的基础上，加一个登陆页面，这里边就涉及到路由定义、model、点击事件、页面排版，路由跳转等诸多知识点。
首先我们需要对项目目录结构进行一下梳理和优化，以便能一目了然。那么我们就一起来分析一下每个目录和文件是做什么的。
build——[webpack配置]
build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。
2.config——[vue项目配置]
config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等。
3.node_modules——[依赖包]
node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。
在两种情况下我们会自己去安装依赖：
（1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install vue-loader）
（2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）
注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4
4.src——[项目核心文件]
项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js，App.vue,及router的index.js
4.1 index.html——[主页]
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
4.2 App.vue——[根组件]
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)。
【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）
<router-view></router-view>是子路由视图，后面的路由页面都显示在此处，打一个比喻吧,<router-view>类似于一个容器，跳转某个路由时，该路由下的页面就会放到这个容器里进行渲染显示。
【script】
vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档，在后面我也会通过例子来说明。
【style】
样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件，例如：
这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。
4.3 main.js——[入口文件]
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的。
components:{App}就是引入的根组件App.vue，后期还可以引入插件，当然首先得安装插件。
4.4 router——[路由配置]
router文件夹下，有一个index.js，即为路由配置文件。
这里定义了路径为'/'的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:4200/#/时就渲染的Hello组件。
类似的，我们可以设置多个路由，‘/index','/login'之类的，当然首先得引入该组件，再为该组件设置路由。
下面我们就先添加一个登陆页面。
这是经过优化的目录结构，登陆页面放到了pages文件夹下，pages文件夹里我们放不嵌套到主体机构的页面。
在iview官网中，我们可以找到登陆相关的form表单，只需要稍加优化，就可以做出一个看着还算正规的登陆页面，是不是就像用了步步高点读机似的，so easy。
具体代码：https://www.iviewui.com/components/form
当然这么丑，作为处女座的小编是不能接受的，我们就来简单的优化一下。
我们先到百度上搜索一张类似于这样的图片作为背景：
在login.vue中添加如下样式代码：
<template>
<div class="body_box">
<div class="login_box">
<Form ref="formInline" :model="formInline" :rules="ruleInline">
<FormItem>
<div class="login_title">登录</div>
</FormItem>
<FormItem prop="user">
<Input type="text" v-model="formInline.user" size="large" placeholder="用户名">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" size="large" placeholder="密码">
<Icon type="ios-locked-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">登录</Button>
<Button type="ghost" @click="handleReset('formInline')">重置</Button>
</FormItem>
</Form>
</div>
</div>
</template>
<script>
export default {
data () {
return {
formInline: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: '请填写用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请填写密码', trigger: 'blur' },
{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('登陆成功!')
this.$router.push({ path: '/index' })
}
})
},
handleReset (name) {
this.$refs[name].resetFields()
}
}
}
</script>
<style scoped>
.body_box{
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: url(../../assets/login_bg1.jpg) no-repeat;
background-size:cover;
}
.login_box{
width:400px;
margin: 200px auto;
padding:20px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-color: #F9FAFC;
}
.login_title {
text-align: center;
font-size: 28px;
}
</style>
在路由文件router/index.js中添加相应路由：
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/layout/main.vue'
import Login from '../components/pages/login.vue'
import NoPage from '../components/pages/404.vue'
import Index from '../components/index.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/index',
component: Main,
children: [{
path: '',
name: '主页',
component: Index,
iconCls: 'ios-home'
},
{
path: '',
name: '主页',
component: Index,
iconCls: 'ios-home'
}]
},
{
path: '/login',
component: Login
},
{
path: '/404',
component: NoPage
}
]
})
这里要说明一下，为啥要在最外层加一个body_box呢？这是为了模拟body，这样背景才能铺满，既不用把背景定义在入口文件App.vue中，又不用在login.vue定义全局样式。你可以看到，这里style中我是加了scoped的，这个背景只在当前页面起作用，这样登陆进入主页后，背景就不会存在了。
最终的效果是这样的：
登陆页面中form表单定义了model为formInline和验证规则rules为ruleInline，规则为：用户名必填，失去焦点后校验，密码必填，最小6位字符，失去焦点后校验，v-model绑定了用户名和密码的输入。$Message是iview自带的Message 全局提示组件，登陆成功后，主页面会有提示。
输入任意用户名+6位密码， 点击登录，通过click调用handleSubmit里的this.$router.push({ path: '/index' }来实现路由跳转。调用handleReset里的this.$refs[name].resetFields()来实现重置功能。
$refs是用来绑定某个dom元素或者组件的，具体实例如下：
<div class="touchscroll"></div>
如果我们想要获取这个div的某个值，比如scrollTop的值，常规的做法是我们必须用document.querySelector（".touchScroll"）获取这个dom节点，然后在获取scrollTop的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的div上绑定div，然后$refs里面调用就行。
因此上面可以写成：<div class="touchscroll" ref='div'></div>
然后在javascript里面这样调用：this.$refs.div.scrollTop。
这样就可以减少获取dom节点的消耗了，大家可以打印一下，this.$refs就知道了。
订阅号中可以和“谷谷”聊天，也可以让他给你讲段子，当然他可不止会这些yo，就看你怎么开发了。
关注后将由管家机器人“谷谷”给您发送
支付宝红包口令
以上是关于vue.js+iview+node.js 前端快速开发框架搭建实战的主要内容，如果未能解决你的问题，请参考以下文章
史上最全Vue2.0+Node.js+MongoDB视频集锦
前端毕业设计（基于Vue.js的在线教学平台）源代码+数据库表 Vue.js+Node.js+MySQL 源码免费分享