vue上 中 下

转自:https://www.jianshu.com/p/2b661d01eaf8

作者:datura_lj
链接:https://www.jianshu.com/p/2b661d01eaf8
來源:简书

一、那么我们就从最简单的环境搭建开始:
  1. 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。
这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。
  1. 安装淘宝镜像,打开命令行工具,把这个(npm install -g cnpm --registry= https://registry.npm.taobao.org)复制(这里要手动复制就是用鼠标右键那个,具体为啥不多解释),安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v,如下图,如果出现相应的版本号,则说明安装成功。
  2. 安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
  3. 安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。


二、通过以上四步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目
  1. 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:①cd 目录路径 ②如果以安装git的,在相关目录右键选择Git Bash Here
  2. 安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
如下图:


  1. cd 命令进入创建的工程目录,首先cd exprice(这里是自己建工程的名字);
  2. 安装项目依赖:npm install,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库),但是但是如果真的安装“个把”小时也没成功那就用:cnpm install 吧
  3. 安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router vue-resource --save。
创建完成的“exprice”目录如下:

下面我简单的说明下各个目录都是干嘛的:


  1. 启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:


注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。

至此简单的一个项目构建完毕....后面我将继续利用这个构建的项目写一个简单的单页面应用。

看到这里给大家推荐一个ide用Atom然后安装vue插件即可,非常之好用

书接上文我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码。

回顾下创建后的项目目录:


说明:在*.vue文件,template标签里写html代码,且template直接子级只能有一个标签。style标签里写样式,script里面写js代码
a. 页面:index.html

这个没什么好说的就是一个简单的html页面,这里id='app',是为后面的设置vue作用域有关的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>datura</title>
  </head>
  <body>
    <div id="app"></div>  
    <!-- built files will be auto injected -->
  </body>
</html>
b. 文件:Hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>  <!-- 这里是展示数据中的  -->
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'hello',   /* 这个name暂时不知道用啥用,根据官方文档说的是方便排错的 */
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'   /* 这里是数据,一定记住数据一定要放data中然后用return返回 */
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面,还有可以设置lang="scss"就是支持css预编译,也就是支持sass或者less  */
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

c. 文件:App.vue
<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-view></router-view>   <!--  这里是用来展示路由页面内容的,如果想用跳转就用<router-link to='xxx'></router-link> -->
  </div>
</template>
<script>
export default {
  name: 'app'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
d. 文件:main.js

这个js文件是主页面配置的主入口。主要是利用es6的模块化引入模块。

import Vue from 'vue'   /* 这里是引入vue文件 */
import App from './App'  /* 这里是引入同目录下的App.vue模块 */
import router from './router'  /* 这里是引入vue的路由 */

/* eslint-disable no-new */
new Vue({
  el: '#app',  /* 定义作用范围就是index.html里的id为app的范围内 */
  router,    /* 引入路由 */
  template: '<App/>',   /* 给Vue实例初始一个App组件作为template 相当于默认组件 */
  components: { App }  /* 注册引入的组件App.vue */
})

e. 文件:index.js

这个是配置路由的页面

import Vue from 'vue'   /* 引用vue文件 */
import Router from 'vue-router'  /* 引用vue路由模块,并赋值给变量Router */
import Hello from '@/components/Hello'  /* 英文Hello.vue模版,并赋值给变量Hello,这里是“@”相当于“../” */
Vue.use(Router)   /* 使用路由 */
export default new Router({
  routes: [     /* 进行路由配置,规定“/”引入到Hello组件 */
    {
      path: '/',
      name: 'Hello',  /* 这里的name同上,暂时没发现有什么意思 */
      component: Hello   /* 注册Hello组件 */
    }
  ]
})
说明:如果需要增加组件那就在components文件下定义xx.vue文件并编写代码即可,如果需要配置路由就要进行在index.js进行路由“路径”配置,还需要点击跳转就要用到<router-link></router-link>标签了。至于后面的过滤器啊,事件啊,钩子函数,ajax等等之类的和vue1.0差不多就不一一叙述,但是会在用到的时候简单说明一下的。我会用下面大约俩个章节来展示一个简单的“小项目”。


前言:经过前两节的学习,我们已经可以创建一个vue工程了。下面我们将一起来学习制作一个简单的实战案例。

说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了

一、 项目说明

ps:这个简单小项目只提供一个小小小的骨架,需要向“它”身上具体加多少“肉”,需要大家考虑好功能和布局后进行完善。

1.首先看下主页效果:如下图



主页分析:大体上分为上(header)、中(body或content)、下(footer)三部分,中间body部分是由若干个相同的li组成的“列表”,所以我们可将li定义为一个组件。
2.再来看下商品详情页:如下图



详情页分析:也分为上、中、下三部分。
分析后是不是觉得so easy呢!很好那么我们就一起来搞一下!!

二、 配置目录文件

在src文件夹(也就是我们码农主要工作区)下,创建assets文件夹(用来保存项目所需图片)、components(存组件commonFooter.vue、DetailHeader.vue、homeHeader.vue、list.vue)、pages(存页面goodsDetail.vue、home.vue)和main.js文件。详情请看下图:

ps: 1.具体文件夹以及文件名称可根据自己项目进行“自拟”。 2.这里的每一个*.vue文件都是一个组件。

三、配置相关接口

主页商品信息及图片, 是从服务器端返回的json数据,不可能所以商品都“写死”。故这里需要模拟后台建立了一个数据文件。在根目录下建立一个goods.json文件用来放“伪数据”,如下图:


注意:下面的注释不要复制进去。否则可能会报错。
/* 模拟数据_代码 */
/* 这里只简单模拟一组比较规整数据,如大家有需求可自行加所需数据 */
{
    "goods": [
        { "price": "69.9", "title": "德芙", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t3688/270/776223567/128582/fa074fb3/58170f6dN6b9a12bf.jpg!q50.jpg.webp" },
        { "price": "63", "title": "费列罗", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t613/100/1264998035/221234/1a29d51f/54c34525Nb4f6581c.jpg!q50.jpg.webp"},
        { "price": "29.9", "title": "大米", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t1258/40/17387560/108696/aced445f/54e011deN3ae867ae.jpg!q50.jpg.webp"},
        { "price": "54.9", "title": "安慕希", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2734/15/680373407/215934/3abaa748/572057daNc09b5da7.jpg!q50.jpg.webp"},
        { "price": "58", "title": "金典", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2482/145/1424008556/91991/d62f5454/569f47a2N3f763060.jpg!q50.jpg.webp"},
        { "price": "60", "title": "味可滋", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2368/3/874563950/70786/7b5e8edd/563074c8N4d535db4.jpg!q50.jpg.webp" },
        { "price": "248.00", "title": "泸州老窖", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t283/166/1424018055/189580/7c0792b7/543b4958N05fa2feb.jpg!q50.jpg.webp"},
        { "price": "328.8", "title": "剑南春", "img": "http://m.360buyimg.com/babel/s350x350_g15/M05/1A/0A/rBEhWlNeLAwIAAAAAAHyok3PZY0AAMl8gO8My0AAfK6307.jpg!q50.jpg.webp"},
        { "price": "49.00", "title": "蓝莓", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2332/148/2952098628/94387/e64654e2/56f8d76aNb088c2ab.jpg!q50.jpg.webp" },
        { "price": "68", "title": "芒果", "img": "http://m.360buyimg.com/n0/jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q70.jpg"}
    ]
}

数据文件创建完成后,就需要写一个接口了,在build文件夹下dev-server.js文件进行配置。如图:


  • 注意
    本文是在vue-cli2.8.1的时候编写。最近很多小伙伴vue -V版本为2.9.1找不到derver.js文件。。现已提供两种解决方案以便参考
简单说明:
  1. 需要在var app = express() 代码下写新增代码,,因通过接口获取数据依赖与express() 对象下方法;
  1. 用require引入模拟数据的文件;
  2. 用express对象下的Router方法来指定入口在哪。
  3. 对进入“入口”的obj,返回相关数据。
/* datura接口 20170302 */
var appData = require('../goods.json')  /* 引入根目录下goods.json数据文件 */
var goods = appData.goods   /* goods.json文件文件下的.goods数据赋值给变量goods */
var apiRoutes = express.Router()  /* 定义express.Router() 对象 */
apiRoutes.get('/goods', function(req, res){   /* 定义接口并返回数据 */
  res.json({
    data: goods
  })
})
app.use('/api', apiRoutes)  /* 定义接口在/api目录下,方便管理 */
/* datura接口 _end */

测试是否该数据可用,在浏览器地址栏中输入:http://localhost:8090/api/goods ,此处因为本人PC的8080端口有冲突所以改成端口8090。在浏览器中展示出如下图数据,代码数据数取成功:

四、编写页面代码

1. 页面入口index.html:

知识点:

  1. 定义挂载Vue实例的对象“#app”;
  2. 必须定义数据战术区域,这里用<router-view></router-view>标签展示组件或模版;
  3. 根据不同设备分辨率改变根字体大小从而达到终端适配。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>secondproject</title>
    <style media="screen">  
    /* 简单进行默认样式重置 */
      * {margin: 0;padding: 0}
      li {list-style: none;}
      a {text-decoration: none;}
      img {vertical-align: middle;}
    </style>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>  <!-- 这里是展示来自路由页面数据的 -->
    </div>
  </body>
  <script type="text/javascript">
  /* 因为我们后面用的是rem布局,所以这里做下处理,根据不用设备分辨率更改跟字体大小。 rem相关布局[请参考](http://www.jianshu.com/p/65f80d4b44bb)*/
    (function(win,doc){
          change();
          function change(){
              doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/320+'px';
          }
          win.addEventListener('resize',change,false);
          win.addEventListener('orientationchange',change,false);  /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
      })(window,document);
  </script>
</html>
2. 主要模版home.vue:这个是来展示数据的,并通过vue的路由展示到index.html。

因为home.vue用到了三个组件,所以我们就先编写下这几个组件
a). homeHeader.vue和之前说的一样,在template标签里写html代码,style标签里写css代码,script标签里写js代码

知识点:<style></style>属性可进行配置,scoped表此样式只在当前页面有效。lang="xxx"支持less/sass语法规则。

<template lang="html">
  <div class="head">
    <div class="header">
      <h4 class="header-cont">主页</h4>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
.head{
  width: 100%;
  height: 2rem;
}
.header{
  width: 100%;
  height: 2rem;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  border-bottom: 2px solid #ff8000;
}
.header h4 {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1.4rem;
}
</style>

b). commonFooter.vue
说明:定义一个footer并定位到页面的底部,在ul内写4个li来模拟按钮。

<template lang="html">
  <div class="footer">
    <ul class="footer-cont">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="css">
  .footer {
    height: 1.8rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 2px solid #ccc;
    background-color: #fff;
  }
  .footer-cont li {
    float: left;
    width: 25%;
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 1.4rem;
    color: #ff8000;
    text-align: center;
  }
  .footer-cont li:active {
    background-color: #ccc;
  }
  .footer-cont:after {
    content: '';
    display: block;
    clear: both;
    width: 0;
    height: 0;
  }
</style>

c). list.vue:这个组件用来展示每个商品列表信息

知识点:

  1. 类似a标签功能的<router-link to="/detail"></router-link>标签,来规定发生点击事件后需要跳转的地址。
  2. :src="img" 中的img是来自父组件的数据,这里用到了父组件向子组件传递数据。props对象在后续的深入学习中会详细解释。
  3. {{ xxx }} 模版展示数据,也可用v-text='xxx',v-html='xxx'来展示数据。后者是防止当网速超慢时,用户会看到大花括号。
  4. {{ xxx|aa|bb }}模版展示数据+过滤器,过滤器顾名思义就是对展示的数据加以过滤,例如这里的是加个符号并保留两位小数。
  5. props
<template lang="html">
  <li class="goods-list">
    <router-link to="/detail"  class="goods-list-link">  <!--  这个是用来跳转页面的,可以理解为a标签 -->
      <div class="goods-list-pic">
          <img :src="img" alt="">
      </div>
      <div class="goods-list-desc">
        <p class="goods-list-name">{{ title }}</p>   
        <p class="goods-list-price">{{ price|dTofixed|dCurrency }}</p>  <!-- 这里用到了过滤器货币形式和保留两位小数 -->
      </div>
    </router-link>
  </li>
</template>

<script>
export default {
  props: ['price', 'title', 'img']   /*  props是子组件获取父组件数据用的 */
}
</script>

<style lang="css" scoped>
  .goods-list {
    width: 50%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
  }
  .goods-list:nth-of-type(odd) {
    border-right: 0.15rem solid #ccc;
  }
  .goods-list:nth-of-type(even) {
    border-left: 0.15rem solid #ccc;
  }
  .goods-list-link {
    display: block;
    padding: 0.5rem 0;
    margin: 0 0.3rem;
    text-align: center;
    background-color: #fff;
  }
  .goods-list:nth-of-type(even) .goods-list-link{
    margin-left: 0;
  }
  .goods-list:nth-of-type(odd) .goods-list-link{
    margin-right: 0;
  }
  .goods-list-pic {
    padding: 0.5rem;
  }
  .goods-list-pic > img {
    width: auto;
    height: 4rem;
  }
  .goods-list-desc {
    padding: 0 0.5rem;
  }
  .goods-list-desc:after {
    display: block;
    content: '';
    clear: both;
  }
  .goods-list-name,.goods-list-price {
    width: 50%;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.8rem;
    color: #333;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .goods-list-price {
    color: #ff8000;
    float: right;
  }
</style>

Vue2.0史上最全入坑教程(完)



阅读更多

没有更多推荐了,返回首页