02.Vue项目简单实例（附Demo）

2019-07-25 本文已影响0人越来越胖了

这篇文章的前提是vue的脚手架已经搭建完毕，下面是我搭建一个简易的demo的过程，demo中包含less的导入，简单界面的显示，router-view的渲染界面跳转，饿了吗的element-ui的界面自定义，element-ui的表单验证的基本使用（async-validator）。
下载demo 提取密码:cewz

项目的目录

配置过程

首先，我是导入了less，因为个人写CSS习惯用less，步骤如下：在终端cd 到工程目录下执行下面的指令

npm install less less-loader --save

完成后，我们可以在package.json文件中看到如下代码说明安装成功。

less成功提示

然后是element-ui的安装，这个可以直接看官网，里面比较详细，我是直接全导入，这里这个不是重点，其中对element-ui的自定义我也写了一些CSS代码，不会玩的可以参考下，如果你之前接触过BootStrap的话这个上手是很快的，步骤如下：

npm i element-ui -S
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

项目编写

首先是把HelloWord文件删除，创建两个vue文件formView和oneNewView，进入到router的index.js配置路由,代码如下：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

import formView from '@/formView.vue'

import oneNewView from '@/oneNewView.vue'

Vue.use(Router)

export default new Router({
  routes: [
          {
          path: '/',
          name: 'formView',
          component: formView
        },
        {
          path: '/oneNewView',
          name: 'oneNewView',
          component: oneNewView
        },
  ]
})

我把app.vue中的代码删了很多，然后把formVIew作为了项目的启动页，因为原则上是不建议在app.vue中写代码的，因为这个是一个入口函数，相当于一个main函数一样。后面讲解对formView中的代码的编写。

formView中的源代码大家可以去看demo，这里不做展示了。

我这里提几点自己项目中的问题理解：

1.export default中name的作用：

name: 作用：只有作为组件选项时起作用。允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

2.对async-validator的一些基本知识介绍：

1.type 是需要的数据类型
2.require 表示是否为必填项，bool类型
3.message 提示信息
4.trigger 触发验证操作的动作
5.min，max是对长度的限制
6.whitespace，仅含有空格的字符串视为错误
在demo中还加入了一个手机号的正则验证。

3.讲一下界面的跳转：

如果是希望在项目启动时做判断，是否进入主页还是进入到类似登录界面，这个需要做路由守卫，这里就先不讲，我也不大懂目前。主要是讲一下为什么我们可以直接用

<router-link to='oneNewView'>去一个测试界面</router-link>

这样的一行代码进行跳转呢。因为我们在app.vue这个入口函数中，我们有一个容器routerView，这个容器会把通过router-link跳转的界面放入其中进行渲染展示，从而推出一个新的界面，大家可以尝试一下，如果我们在app.vue中直接导入一个formView模块的话，我们会发现，在formView中再进行router-link跳转时，会出现新的视图的再原有的UI基础上再routerView里面再渲染了一个UI，是两个界面在一起了。这个操作我在app.vue中也有代码，只是我给屏蔽了，大家可以解开玩玩就能体会了。路由中的这段代码：

 {
          path: '/',
          name: 'formView',
          component: formView
        },

就是把formView设置成了启动时的首页，本来默认是启动helloWord.vue的，所以可以看做app.vue内部是没有UI的是空的，所以就规避了上面的问题。

Demo下载密码:cewz