08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习

  • npm 学习

    • 官方文档
    • 推荐资料
    • 需要了解的知识点
      • package.json

        文件相关配置选项

      • npm 本地安装、全局安装、本地开发安装等区别及相关命令
      • npm script脚步的基本编写能力

有时间专门写一个这样的专题,如果需要可以邮件我。[email protected]

  • webpack基础学习

    • 官方文档
    • Webpack了解的知识点:
      • webpack的基本配置
      • 了解webpack常用的loader: less-loader、sass-loader、 vue-loader、style-loader、css-loader、eslint-loader、babel-loader等
      • 熟悉Webpack的webpack-dev-server的基本配置和使用,会配置热更新
  • es6语法学习
    • 阮一峰老师的大作《ECMAScript 6 入门》
    • 需要学习的知识点
      • es6的模块机制
      • 各种最新语法糖,简写、geter、setter、箭头函数
      • 类、继承的心机制 ...
  • nodejs基础知识
    • 知识点学习:

      • 文件操作
      • http服务
      • express
  • 组件化开发思想

8.2. Vue脚手架工具:vue-cli构建实战项目

其实如果编写Vue的前端项目,直接使用vue的官方vue-cli构建工具最好用,一个命令就可以直接生成项目的结构和目录。 而且官方需要依赖的包也可以自动配置好,只需要npm instal一下,然后就可以开发测试了。

8.2.1. vue-cli安装

# 安装vue-cli。  安装之前首先确保你已经安装好了nodejs 而且打开命令行
$ npm install -g vue-cli

# 校验一下是否安装成功
$ vue -V

#=>  2.5.1  我当前的版本是这个,你的可能比这个新

8.2.2. 使用vue-cli初始化项目

通过以下命令的方式可以创建一个项目文件夹,并初始化对应的文件。

$ vue init <template-name> <project-name>

其中template-name可以取以下值,每个值对应不同的项目构建的模板。

  • webpack--全功能的Webpack + vueify,包括热加载,静态检测,单元测试
  • webpack-simple--一个简易的Webpack + vueify,以便于快速开始。
  • browserify--全功能的Browserify + vueify,包括热加载,静态检测,单元测试
  • browserify-simple--一个简易的Browserify + vueify,以便于快速开始。

安装和开发控制台的命令:

# 如果已经安装,请省略
$ npm install -g vue-cli

# 初始化一个webpack全功能包的vue项目,请您把my-project换成你自己的项目名。
$ vue init webpack my-project

# 用命令行进入当前项目目录
$ cd my-project

# npm安装所有的依赖的包
$ npm install

# 运行测试的首页
$ npm run dev

8.2.3. 综合实例开发记录

  1. 通过vue-cli构建工具初始化项目目录

安装过程,控制台会问你项目名称是什么?项目描述?项目作者,是否使用eslint校验,是否使用单元测试等....

我的安装过程如下请参考:

$ vue init webpack ttl                        # => 安装webpack模板的项目 ttl(项目名可以随便取)

  A newer version of vue-cli is available.

  latest:    2.6.0
  installed: 2.5.1

  This will install Vue 2.x version of template.

  For Vue 1.x use: vue init webpack#1.0 ttl

? Project name mydemovue                        # => 项目名称
? Project description A Vue.js project          # => 项目描述
? Author malun <[email protected]>               # => 作者
? Vue build standalone                          # => 是否支持单文件组件
? Use ESLint to lint your code? Yes             # => 是否支持ESLint代码校验
? Pick an ESLint preset Standard                # => 校验的标准是什么?
? Setup unit tests with Karma + Mocha? Yes      # => 是否使用单元测试
? Setup e2e tests with Nightwatch? Yes          # => 是否使用e2e测试

   vue-cli · Generated "ttl".

   To get started:

     cd ttl
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

通过上面一系列的命令后,我们就会创建一个webpack配置好的项目包。目录结构如下:

ttl
|--.babelrc           #=> babel的配置文件,主要用于转换es6等最新的js语法。
|--.editorconfig      #=> 编辑器配置
|--.eslintignore      #=> eslint的忽略校验的配置文件
|--.eslintrc.js       #=> eslint的配置校验js是否规范的配置文件
|--.gitignore         #=> 设置git忽略的管理的文件
|--README.md          #=> readme说明文件
|--build/             #=> 自动构建存放的文件地方
|--config/            #=> 当前开发、测试等配置的文件,需要懂点nodejs了啊。
|--index.html         #=> 项目的主入口的模板
|--package.json       #=> npm的配置文件
|--src/               #=> 源码目录
|--static/            #=> 静态资源存放的目录
|--test/              #=> 测试相关目录

  1. 初始化依赖包
$ cd ttl              #=> 进入上面创建好的项目目录
$ npm install         #=> 安装所有的依赖包。  安装过程可能非常长,网络也可能有问题,请耐心等待。

# 安装完成后,可以直接运行测试,如果自动打开浏览器,并跳转到http://localhost:8080/ 说明一切都ok了。
$ npm run dev

npm 安装的时候经常网会断开,国内的网(哎,说多了都是泪)你懂的。最好能科学上网,或者是用淘宝的npm的镜像

  1. 安装vue-router组件
$ npm i -S vue-router

  1. 到项目的

    /src/components/

    目录下创建三个组件文件。

分别是:

  • 首页组件

    <template>
    <div class="home">
      <h3>{{ msg }}</h3>
    </div>
    </template>
    
    <script>
    export default {
    name: 'home',     // 组件可以有自己的名字。
    data () {         // 组件的data必须是函数
      return {
        msg: '这里是Home视图'
      }
    }
    }
    </script>
    
    <style scoped>
    h3 {
    background-color: #82c;
    }
    </style>
    
    
  • 用户首页组件
    <template>
    <div>
      <h3>{{ msg }}</h3>
    </div>
    </template>
    
    <script>
    export default {    // es6的模块导出定义语法,此模块导出默认的对象
    name: 'user',     // 组件可以有自己的名字。
    data () {         // 组件的data必须是函数
      return {
        msg: '这里是User视图'
      }
    }
    }
    </script>
    
    <style scoped>
    h3 {
    background-color: red;
    }
    </style>
    
    
  • 产品组件
    <template>
    <div class="product">
      <h3>{{ msg }}</h3>
    </div>
    </template>
    
    <script>
    export default {
    name: 'product',     // 组件可以有自己的名字。
    data () {         // 组件的data必须是函数
      return {
        msg: '这里是Home视图'
      }
    }
    }
    </script>
    
    <style scoped>
    h3 {
    background-color: green;
    }
    </style>
    
    

项目的目录结构为:

ttl
|-- src
|--|-- Hello.vue
|--|-- Home.vue
|--|-- Product.vue
|--|-- User.vue

  1. 创建router对象及配置路由

src目录下创建approuter.js文件。 然后添加如下代码:

import VueRouter from 'vue-router'              // 导入路由模块
import Home from './components/Home.vue'        // 导入Home组件
import User from './components/User.vue'
import Product from './components/Product.vue'

export default new VueRouter({                  // 定义路由规则对象
  routes: [
    {path: '/home', component: Home},
    {path: '/user/:id', component: User},
    {path: '/product/:id', component: Product}
  ]
})

  1. 修改main.js文件 找到src/目录下的main.js文件, 共修改4处,添加路由引用、添加路由规则对象导入、启用路由、将路由键入到Vue中。
    修改此文件为:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'      // +++1、导入路由组件
import router from './approuter'        // +++2、导入我们自己写的路由配置文件

// +++ 3、使用路由组件
Vue.use(VueRouter)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router: router                        // +++4、添加路由对象
})

  1. 在app.vue中添加路由导航

最终代码如下:

<template>
  <div id="app">
    <nav class="top-menu">
      <ul >
        <li v-for="item in menuList">
          <router-link :to="item.url">{{ item.name }}</router-link>
        </li>
      </ul>
    </nav>
    <hr>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return {
      menuList: [
        { name: '首页', url: '/home' },
        { name: '用户', url: '/user/19' },
        { name: '产品', url: '/product/20' }
      ]
    }
  }
}
</script>

<style>
#app {

}
.top-menu ul, .top-menu li {
  list-style: none;
}
.top-menu {
  overflow: hidden;
}
.top-menu li {
  float: left;
  width: 100px;
}
</style>

刷新一下浏览器,你将会看到最终的运行结果。


联系老马

对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

 

微信:Flydragon_malun 或者18911865673

时间: 2017-11-24

08Vue.js快速入门-Vue综合实战项目的相关文章

09Vue.js快速入门-Vue入门之Vuex实战

9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是 反之则不同.如下图所示:   vue父子传递 9.2. 单向数据流动 单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理就会需

06Vue.js快速入门-Vue组件化开发

组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她单文件组件开发的方式更是非常方便,而且第三方工具支持也非常丰富,社区也非常活跃,第三方组件也呈井喷之势.当然学习和使用Vue的组件也是我们的最重要的目标. 6.1. 全局扩展方法Vue.extend Vue提供了一个全局的API,Vue.extend可以帮助我们对Vue实例进行扩展,扩展完了之后,就

07Vue.js快速入门-Vue路由详解

对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性非常好,可以很好的跟其他第三方的路由框架进行结合.当然官方也给出了路由的方案: vue-router; 建议还是用官方的最好,使用量也是最大,相对来说Vue框架的升级路由组件升级也会及时跟上,所以为了以后的维护和升级方便还是使用Vue自家的东西最好. 7.1. Vue-router的版本对应 注意:

Vue.js快速入门教程_javascript技巧

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

Vue.js快速入门实例教程_javascript技巧

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

webpack+vue.js快速入门教程_javascript技巧

前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

Three.js快速入门教程_javascript技巧

引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

Vue.js快速入门

Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 作为前端的三大框架之一(其他两个是Angular.React),Vue得到了大多

8个带你快速入门的趣味机器学习项目(附数据源、教程)

抽时间做项目是最好的一种投资方式,在项目中你会享受学习.保持积极性并能获得更快的进展.没有任何理论可以代替实践,虽然教材和课程能让你掌握一些基本原理,但在尝试应用时,你会发现具体操作起来比较困难. 因此项目有助于提高应用机器学习的技巧,此外在找工作中也会给自己增添一些筹码. 以下将具体介绍这八个项目,每个项目都能在一个周末完成,如果你喜欢的话,可以对其进行相关的扩展. 本文目录 机器学习的角斗士 扮演"点球成金" 预测股票价格 教会神经网络阅读的笔迹 调查安然事件 从Scrath开始写