不一样的 vue 实战 (3): 布局与组件

首先

• 首发博客: 我的博客
• 项目源码: 源码(喜欢请star)
• 项目预览: 预览
• 上一章: 《学习不一样的vue(2)实战:项目分析》
• 我的Q群: meteor高手群 vue学习交流群

首先：讲一句抱歉,周末俗事缠身,无力更博，只有今日发了。而且写博挺消耗精力的，你别看短短了几千字，需要反复的斟酌，反复的修改，如果有错误与不足的地方，请评论指正，谢谢！

前言

本文是结合官方的 api文档,进行渐进式学习,在实战中熟悉文档,在文档中理解实战。下面的代码中有详细的代码注释，和逻辑讲解,请仔细阅读。

3.1.1 什么是vue?

如果你还不知道什么Vue是干什么的，请参见什么是vue。

3.1.2 项目结构

参考以下的目录结构，新建文件夹，下面打‘ * ’的为新建文件夹

 ├── build // 构建服务和webpack配置
 ├── config // 项目不同环境的配置
 ├── dist // 项目build目录
 ├── index.html // 项目入口文件
 ├── package.json // 项目配置文件
 ├── src // 生产目录
 │ ├── assets // 图片资源
 │ ├── common * // 公共的css js 资源
 │ ├── components // 各种组件
 │ ├── moke * // 本地静态数据管理文件
 │ ├── App.vue // 主页面
 │ ├── vuex * // vuex状态管理器
 │ ├── router // 路由配置器
 │ └── main.js // Webpack 预编译入口
 
 

3.1.3 Vue 实例

新增知识点

• Vue实例

步骤

打开 /src/main.js 你会看到

import Vue from 'vue'   //引入vue模块
import App from './App'  //引入vue组件
import router from './router' // 引入路由配置文件

Vue.config.productionTip = false // 关闭生产模式下给出的提示

new Vue({  // 创建一个 Vue 的根实例
  el: '#app', //挂载id,这个实例下所有的内容都会在index.html 一个id为app的div下显示
  router, // 注入路由配置。
  template: '', //配置根模板 即打开页面显示那个组件
  components: { App } // 注入组件
})

3.1.4 Style

第一步 安装less

在终端上输入

npm install --save-dev less-loader style-loader less 

第二步 配置less

在 /build/webpack.base.conf.js 加上

module.exports = {
  module: {
    rules: [
      {   //把这个对象添加在里面
        test: /\.less$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'less-loader'
        ]
      }
    ]
  }
}

第三步 下载style文件

因为本课程主要是针对Vue的实战，所以在这里不去讲解less的用法，如果感兴趣可以去less教程学习，也不会讲每个样式怎么写,请下载Style文件,到 src/common/下。

3.1.5 ‘.vue’文件

• Vue自定义了一种后缀名名字为.vue文件,它将html, js, css 整合成一个文件,和里面 template script style三个区别分别依次对应。