pearyman / vue-lessons Goto Github PK

View Code? Open in Web Editor NEW

5.0 3.0 1.0 149 KB

🍉taught you how to learn Vue

License: MIT License

JavaScript 41.11% HTML 0.76% Vue 48.47% CSS 9.66%

vuejs2 vue-resource vue-router vuex stylus webpack2 iconfont express axios

vue-lessons's Introduction

vue-lessons

vue实战小项目，包教不包会。

vue-lessons's People

Stargazers

Watchers

Forkers

xiaolong321

vue-lessons's Issues

要做什么

我们这个项目主要是通过vue2.0来做一个点餐的webapp，其中主要涉及到的技术我应该也在前面向大家有所提及。当然代码我也是再写的过程中。先来看一下部分的效果：

components简要

什么是组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。

components是vue中很重要的一个角色。很大的程度上让我们的代码低耦合，写一次后重复的部分只需要引用注册使用就可以了。

举个例子：

<template lang="html">
	<div class="">
	 i am seller
	</div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

这个实际上就是一个简单的vue模板

对应在js中这样注册

import seller from './components/seller/seller'
export default {
  components: { seller }
}

然后在其它template下，就可以进行使用了

<seller></seller>

父组件向子组件传递数据，子组件是通过props来获取数据的
这种方式我只是现提一下，在代码中会有介绍解释。

下一节，我们将介绍制作接口以及拆分组件。

1.package.json

在这个package.json文件中，name是我们在初始化项目过程中项目的名称。version是项目的版本号，description是项目中的描述。

运行npm run dev的时候执行的是build/dev-server.js文件
运行npm run build的时候执行的是build/build.js文件

2.webpack配置

webpack是当前最火的前端资源构建工具。将前端资源进行编译打包出入输出等操作。

可能之前大家都是在使用一些gulp、grunt之类的构建工具，但是在vue-cli中我们选择使用了webpack这个构建工具。初次使用webpack的同学可能会感觉webpack的依赖以及配置之复杂，但是接下来我将按照代码注释的方式向大家逐行介绍每一行的含义，来帮助大家会使用webpack，理解webpack。

2.1 webpack.base.conf.js

主入口文件 entry:

entry: {
    app: ‘.src/main.js’
}

输出文件 output:

output: {
    path: config.build.assetsRoot,   // 导出目录的绝对路径
    filename: ‘[name].js’, // 导出文件的文件名
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath   // 生产模式或开发模式下的html、js等文件内部引用的公共路径
  }

文件解析 resolve:

 resolve: {
    extensions: [‘.js’, ‘.vue’, ‘.json’], // 自动解析确定的扩展名，使导入模块时不带扩展名
    alias: {  // 创建import或 require的别名
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': path.resolve(__dirname, '../src/common')
    }
  }

模块解析module

如何处理项目中不同类型的模块

module: {
    rules: [
      {
        test: /\.(js|vue)$/,    // 对js、vue后缀
        loader: ‘eslint-loader’, // 进行eslint检查
        enforce: “pre”, // 编译之前
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require(‘eslint-friendly-formatter’)  
        }
      },
      {
        test: /\.vue$/, // vue文件后缀
        loader: ‘vue-loader’, // 使用vue-loader进行处理
        options: vueLoaderConfig // 对vue-loader做的额外的选项配置
      },
      {
        test: /\.js$/, //js 文件后缀
        loader: ‘babel-loader’, // 使用babel-loader进行处理
        include: [resolve(‘src’), resolve(‘test’)] //必须处理包含src、test的文件夹
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 图片后缀
        loader: ‘url-loader’,  // 使用url-loader处理
        query: { // query是对loader做的额外配置
          limit: 10000, // 对于小于10Kb的以base64进行引用
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]’)  // 文件名为name.7位hash值.扩展名
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件
        loader: ‘url-loader’, // 使用url-loader进行处理
        query: {
          limit: 10000, //字体小于10kb的处理方式
          name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’) // 文件名为 name.7位hash值.后缀名
        }
      }
    ]
  }

注意：关于query仅由于兼容性原因的存在。请使用options代替。

这里面我们可以在package.json中看一下我们的webpack版本，我们这里面使用的是 2.2.1版本的webpack。

webpack.dev.conf.js

module: {
    // 通过传入一些配置来获取rules配置，此处传入了sourceMap: false，表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  }

在 util.js文件下中的styleLoaders的配置如下面所示：

styleLoaders

exports.styleLoaders = function (options) {
  var output = [];  // 定义返回数组，数组中保存的是针对各类型的样式文件的处理方式

  var loaders = exports.cssLoaders(options) // 调用cssLoaders方法返回各类型的样式对象 (css: loader)
  for (var extension in loaders) {  // 遍历loaders
    var loader = loaders[extension] // 根据遍历获得的key(extension) 来得到value (loader)
    output.push({
      test: new RegExp(‘\\.’ + extension + ‘$’),  //  处理文件的类型
      use: loader // 用loader来处理，loader来自loaders【extension】
    })
  }
  return output
}

既然上面的代码调用了cssloaders,那么我们就继续看看在util.js中的另外一个方法—cssloaders是怎么实现的吧.

cssLoaders

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = {
    loader: 'css-loader',
    options: { // options 是 css-loader的选项配置
      minimize: process.env.NODE_ENV === ‘production’, // 生成生产环境下的压缩文件
      sourceMap: options.sourceMap // 根据参数是否要生成sourceMap文件
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {   // 生成loader
    var loaders = [cssLoader]  // 默认的loader是css-loader
    if (loader) { // 如果参数loader还在
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {  // 将loaderOptions和sourceMap组成一个对象
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {  // 如果传入的options存在extract并且为true
      return ExtractTextPlugin.extract({  // ExtractTextPlugin 分离js中引入的css文件
        use: loaders, // 处理loader
        fallback: ‘vue-style-loader’ // 没有被提取分离时使用的loader
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
  return { // 返回css类型对应的loader组成的对象  generateLoaders()来生成loader
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

下面我们再次回到webpack.dev.conf.js文件下，介绍一下本文件下最后一个项目———插件配置.

plugins

plugins: [
    new webpack.DefinePlugin({  // 编译时配置的全局变量
      ‘process.env’: config.dev.env // 当前环境为开发环境
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(), // 热更新插件
    new webpack.NoEmitOnErrorsPlugin(), // 不触发错误，即编译后运行的包正常运行
    // https://github.com/ampedandwired/html-webpack-plugin 
    new HtmlWebpackPlugin({ // 自动生成html文件，比如编译后文件的引用
      filename: ‘index.html’, // 生成的文件名
      template: ‘index.html’, // 模板
      inject: true
    }),
    new FriendlyErrorsPlugin() // 友好的错误提示
  ]

以上就是我们的开发环境配置，下面我们来看一下生产环境的配置：

webpack.prod.conf.js

生产环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置。module的处理,主要是针对css的处理。同样的此处调用了utils.styleLoaders：

module: {  
    rules: utils.styleLoaders({    
    sourceMap: config.build.productionSourceMap,     
    extract: true   
 }) 
}

输出文件 output

output: {   
    path: config.build.assetsRoot,  //导出文件目录 
    filename: utils.assetsPath('js/[name].[chunkhash].js'),   //导出的文件名 
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')   //非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块 
}

插件plugins

  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env  // 配置全局环境为生产环境
    }),
    new webpack.optimize.UglifyJsPlugin({ // js压缩插件
      compress: { // 压缩配置
        warnings: false //不显示警告
      },
      sourceMap: true // 生成sourceMap文件
    }),
    // extract css into its own file
    new ExtractTextPlugin({ // 将js中引入css分离插件
      filename: utils.assetsPath('css/[name].[contenthash].css') // 分离出来的css文件名
    }),
 
    new OptimizeCSSPlugin(),    // 压缩提取出的css,并解决ExtractTextPlugin分离出的js重复问题(多个文件引用同一个css文件)
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({  //生成html的插件,引入css文件和js文件
      filename: config.build.index, // 生成的html的文件名
      template: 'index.html', // 依据的模板
      inject: true, // 注入的js文件会被放在Body标签中，当值为'head'的时候，将被放在head标签中
      minify: { // 压缩配置
        removeComments: true, // 删除html中的注释代码
        collapseWhitespace: true, // 删除html中的空白符
        removeAttributeQuotes: true // 删除html元素中属性的引号
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency' //按dependency的顺序引入
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({ //分离公共js到vendor中
      name: 'vendor', // 文件名
      minChunks: function (module, count) { // 声明公告的模块来自 node_modules文件夹
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
//上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值，导致浏览器缓存失效。
// 原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。
// 当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然会导致vendor变化。vendor变化会导致其hash值变化。
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({  //下面主要是将运行时代码提取到单独的manifest文件中，防止其影响vendor.js
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([  // 复制静态资源,将static文件内的内容复制到指定文件夹
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']  //忽视.*文件
      }
    ])
  ]

额外配置

if (config.build.productionGzip) {  // 配置文件开启gzip压缩
  var CompressionWebpackPlugin = require('compression-webpack-plugin')  // 引入压缩文件的组件，该插件会对生成的文件进行压缩，生成一个.gz文件

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',  // 目标文件名
      algorithm: 'gzip', // 使用gzip压缩
      test: new RegExp( // 满足正则表达式的文件会被压缩
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,  // 资源文件大于10KB的时候会被压缩
      minRatio: 0.8  // 最小压缩比达到0.8的时候会被压缩
    })
  )
}

npm run dev

npm run dev

当我们熟悉了上面的配置之后，下面让我们来看看当我们执行了npm run dev之后发生了什么。
在package.json的文件中我们定义了dev的运行脚本

  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  }

当运行 npm run dev的命令时，实际上会运行 dev-server.js文件。
下面我们来看看这个文件的构成：

require('./check-versions')()  // 检查版本

var config = require('../config')  // nodejs环境配置
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require('opn')  // 强制打开浏览器
var path = require('path')  // 提供文件路径的方法
var express = require('express')  // 借助express来启动服务
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware') // http代理中间件
var webpackConfig = require('./webpack.dev.conf') // 依赖开发配置

// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port // 端口号
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser  // 是否打开浏览器
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable  // http的代理url

var app = express(); // 启动express
var compiler = webpack(webpackConfig);  // webpack编译

// devMiddleware这个中间件是express专门为webpack开发的中间件
// webpack-dev-middleware的作用
// 1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件
// 2.当文件改变时,会自动编译。
// 3.当在编译过程中请求某个资源时，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
});

// webpack-hot-middleware的作用就是实现浏览器的无刷新更新,这个中间件是webpack中的一个小亮点
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
});
// force page reload when html-webpack-plugin template changes
//声明hotMiddleware无刷新更新的时机:html-webpack-plugin 的template更改之后
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  });
});

// proxy api requests
//将代理请求的配置应用到express服务上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
//使用connect-history-api-fallback匹配资源
//如果不匹配就可以重定向到指定地址
app.use(require('connect-history-api-fallback')())

app.use(devMiddleware)  // 应用devMiddleware中间件
app.use(hotMiddleware)  // 应用hotMiddleware中间件

// 配置express静态资源目录
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

var uri = 'http://localhost:' + port  

devMiddleware.waitUntilValid(function () {  //编译成功后打印uri
  console.log('> Listening at ' + uri + '\n')
})

module.exports = app.listen(port, function (err) {  // 启动express服务
  if (err) {
    console.log(err)
    return
  }

  // when env is testing, don't need open it
 // 满足条件则自动打开浏览器
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

npm run build

由于在package.json中的配置，npm run build执行的是build.js文件。

require('./check-versions')()

process.env.NODE_ENV = 'production' // 设置当前的环境为production

var ora = require('ora') // 终端显示的转轮loading
var rm = require('rimraf') // node环境下rm -rf的命令库
var path = require('path') // 文件路径处理
var chalk = require('chalk')  // 终端显示带颜色的文字
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')  // 生产环境下的webpack配置

var spinner = ora('building for production...')  // 在终端显示ora库的loading效果
spinner.start()

// 删除已编译文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
//在删除完成的回调函数中开始编译
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()  // 停止loading
    if (err) throw err
    // 在编译完成的回调函数中,在终端输出编译的文件
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

最后

想要打赏，点击这里
有话要说，直接👇

本地环境都有哪些

相信大家都已经搭建好了node环境以及npm安装包。在这一节里，我将会分步骤带领大家安装vue-cli。并且在这过程中，会不断的穿插一些其它的基础知识。

本地构建vue应用主要有以下几种方式

当然，我们可以通过cdn将vue直接引用到你的项目中去。

但是在vue官方文档中

 推荐：unpkg , 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue 浏览 npm 包资源。也可以从 jsdelivr 或 cdnjs 获取，不过这两个服务版本更新可能略滞后。

这里，我们推荐使用vue-cli，这个是vue官方的Vue项目脚手架工具。最主要的特点还是安装的十分方便快捷。这里，我们先来安装一下vue-cli。

安装vue-cli

vue-cli是vue官方所提供的一个脚手架工具，这里面默认继承了express以及webpack打包工具。
首先，我们默认大家都已经安装了node.js (>=4.x, 6.x preferred),以及npm包管理器。（当然如果大家觉得npm较慢，可以使用国内淘宝的cnpm）

1. 安装 vue-cli

 npm install -g vue-cli

注意： -g表示全局安装，不加-g表示本项目安装

2. 初始化项目

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

  vue init webpack vue-test

当然在这个里面会出现一些有关于vue的一些配置选项，大家可以根据自己的使用条件进行选择。
比如 vue-router、ESlint、Karma…
我在这里只是演示搭建Vue的基本环境，所以没有加上单元测试等工具。

很明显，在我们初始化完vue-test这个项目后，vue-cli已经很人性化的将开始操作告诉我们了。

cd vue-test (进入vue-test文件夹)
npm install  (将内部的依赖进行安装)
npm run dev (开始dev环境)

安装成功

解释脚手架生成的一级目录

到目前为止，我们算是成功的开启了vue环境，将vue脚手架的初始项目成功的跑起来了。下面我们来进入它的脚手架工具项目里面，来看看它是怎么跑起来的吧。

我们现在一级目录来看一下，每一个文件夹以及配置文件的用处：

build：webpack的一些配置文件以及服务启动文件
config：多为build中所依赖的文件
src: 页面以及逻辑文件夹
static: 字体以及公共样式文件夹
.babelrc: es6编译文件配置，将es6编译为es5
.editorconfig: 编写风格配置文件，比如缩进文件格式等等
.eslintignore: 忽略检测一些文件格式，比如我们默认忽略检测build以及config中的js
.eslintrc.js: 代码规范化配置文件
.gitignore: 忽略上传一些文件或配置
.postcsssrc.js: 用js来处理css
index.html: 主文件入口
package.json: npm依赖以及开发生产环境所依赖的模块包
README.md: 解释说明一下本项目是做什么的

在下一节里，我们将要详尽的介绍一下webpack。

最后

想要打赏，点击这里
有话要说，直接👇

上一节: 用vue-cli搭建本地开发环境
下一节: package.json以及webpack配置

Vue准备工作

大家好，一直在想做一个教程来帮助大家学习vue以及vue全家桶的一些目前比较火热前端技术。直到今天才得以实践起来。

本次课程的目的是通过一个实实在在的项目例子，帮助大家掌握一些前端项目开发中比较流行的框架。

当然，要想开始本门课程的学习，是要有一定的基础知识的。

基础知识必备

前端基础知识（html , css3 , javascript）
vue基础知识
stylus
es6
node环境 ^v6.6.0
npm安装包 ^v3.10.9
express

准备工作

在学习本课程之前，我们需要做一些准备工作。

当然如果你之前机器上安装过node环境以及npm包管理器，
确保你的node版本在 ^v6.6.0
确保你的npm版本在 ^v3.10.9

如果你之前没有安装过，那么按照我上面给出的链接进行安装。

在下一节中，我们将要用安装好的这些环境来进行安装vue-cli安装包了。
大家务必要检查好环境版本。

我们要做什么

我们要通过使用vue全家桶做一个点餐的webapp

问题

当然大家如果有一些问题，也可以参与讨论。
你们直接在每篇教程的下面直接进行留言即可。
文明留言，避免撕逼。

最后

想要打赏，点击这里
有话要说，直接👇

下一节用vue-cli搭建本地开发环境

header编写(1)

教程使用方法

在逐步编写的过程中，难免会有一些遗漏之处。大家可以按照教程逐步加入代码，当然要注重理解以及自己的书写。如果有什么不对的问题，可以尝试自己解决。或者在本教程目录下看一下源代码进行比较。

reset.css

在写任何项目的时候，我们首要需要引入的就是reset.css。主要引入的目的是消除部分浏览器的差别，使得样式能够统一化。这里给出的是一份标准的reset.css。

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

.divider {
  height: 16px;
  width: 100%;
  background: #f3f5f7;
  border-top: 1px solid rgba(7, 17, 27, 0.1);
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* custom */

a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}

li {
  list-style: none;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

html, body {
  width: 100%;
}

body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

我们将这个reset.css放在static-css目录下，然后在根目录的index.html里进行引用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/static/css/reset.css">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

App.vue

实际上这也是一个组件，在这个组件中，主要还是放置的是框架。

项目结构解析

5.项目结构解析

我们在第2节的时候，已经分析了vue-cli的一级结构目录的作用。下面来看看最主要的src、以及static的目录结构以及作用。

5.1 src

  src
     -- assets
     -- components
          -- header.vue
     -- App.vue
     -- main.js
  static

5.1.1 assets

这个里面实际上放一些辅助图片等等，而在项目中我没有用这个文件夹。是因为我将每个组件需要的图片都放到了对应的组件里面。这样在调用上更加的简单，路径会更加的方便。

比如：

 src
     -- assets
     -- components
          -- header
               -- header.vue
               -- img
                   -- 1.png
     -- App.vue
     -- main.js

5.1.2 components

vue中主要的一个亮点是组件化，我们在实际的开发过程中，可以将公用的一些模块集中成一个。也就是在components 文件夹下可以放置这些模块。

比如将Header 模块单独拿出来，在App.vue中，只需要将header.vue这个模块引入进来，并且在components中注册一下，就可以引用这个模块了。

这里我只是举个例子，说明一下这个文件夹的用处以及组件的用法，具体的我们后面再详聊。

5.1.3 static

static 一般是一些公共的样式文件。
比如我就讲reset.css 放在static文件夹下。

   static
       -- css 
             -- reset.css

好了，基本上大体知道这几个文件夹的作用，以及前面所做的那些技术环境的铺垫。我们从下一节开始，就开始实际代码的编写了。再次重申一下，大家要有一些vue以及stylus的一些基础知识。

我会将代码以及一些图片放在本次教学课程的项目中，不过还是希望大家能够跟着一步步走通这个项目。知道本项目中每一行每一步代码的含义以及作用。相信这样会对大家有很大的帮助以及理解。

在下一节里会为大家详细的介绍一下要做的这个小项目，主要是点餐业务的一个小demo。当然详尽的资料是参考饿了么的外卖app来的。

最后

想要打赏，点击这里
有话要说，直接👇

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.