公共组件及脚手架webpack模板

一、公共组件的创建和使用

　　前面已经学习vue组件时，了解了公共组件，但在脚手架项目中只使用过局部组件。这里是讲解全局组件如何在脚手架项目中去使用。

1、创建全局组件

　　在src/components/Common/目录下创建Header.vue组件。

<template>
    <div class="header">
        我是头部
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{

            };
        },
    };
</script>

<style scoped>

</style>

2、引入和注册全局组件

　　main.js是整个项目的入口启动文件。随后引入和注册全局组件。

// main.js是整个项目的入口启动文件
// 导入npm下载的模块
import Vue from 'vue'

// 导入自己编写的模块
// 不同在于如果是npm下载的from直接写名称，自己编写的模块 from后接路径
import App from './App.vue'

// 1.引入全局的组件
import Header from './components/Common/Header.vue'
// 2.注册全局组件
Vue.component(Header.name, Header);


new Vue({
  el: '#app',
  // DOM直接渲染
  // appendChild()
  render: h => h(App)
})

3、在入口组件中使用全局组件

<template>
    <!-- 组件的页面结构 -->
    <div id="app">
        <Header/>
        <h3>{{msg}}</h3>
        <div v-html="title"></div>
        <ul>
            <!-- key绑定key的时候，如果数据中有id就绑定id，没有id绑定index -->
            <li v-for="(item, index) in datas" :key="index">{{item}}</li>
        </ul>
        <!-- 引入首页, -->
        <Home :text="text" @add="addHandler"/>
    </div>
</template>

4、页面显示

　　

二、vue-cli的webpack模板项目 

1、创建webpack模板项目

　　打开命令行控制台执行如下命令：

$ vue init webpack webpack_project

　　webpack 是项目模板，webpack_project 是项目名称。

　　命令执行中有如下配置需要选择：

　　

　　注意：ESLint一定要关闭，否则编写代码时会非常麻烦。创建成功会显示如下信息：

　　

2、运行项目实例

　　首先修改package.json文件，在script的dev中添加“--open”配置，这样在启动项目时会自动打开项目页面。

  "scripts": {
    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

　　由于前面已经默认执行了npm install，完成了依赖安装。可以用如下方式启动实例：

$ cd webpack_project/
$ npm run dev

　　启动项目后自动打开项目页面如下所示：

　　

3、项目结构

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

（1）build和config目录

　　build目录包含开发和生产环境的webpack相关配置。通常不需要触摸这些文件，除非想自定义webpack加载器。

　　config目录主要存放配置文件，用于区分开发环境和生产环境的不同。

（2）static目录

　　该目录是不希望使用webpack处理的静态资源目录，它们将直接打包到webpack构建文件的dist目录下。

（3）webpack模板官方介绍信息

　　https://vuejs-templates.github.io/webpack/ 

三、项目中集成插件vue-router

　　制作单页面应用一个是需要vue，另一个是需要vue-router。由于前面创建项目时没有默认安装vue-router，需要手动安装。

1、vue-router安装

$ npm install vue-router -S

　　“-S”表示 “--save”，保存到当前项目的依赖页面。查看package.json文件添加内容显示如下：

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.6"
  },