Vue组件

vue组件：封装前端vue特效代码，便于引用
全局组件
- 全局组件通过Vue.component在script标签中注册
  - 参数1：指定组件名称
  - 参数2：{}对象，{}内通过template指定组件要加载的内容
- 全局组件调用：在div标签中通过组件名称进行调用
局部组件
- 局部组件定义：var 组件名称={}对象，{}内通过template指定组件要加载的内容
- 在全局组件中定义components属性，components:{}将局部组件注册到全局组件中，进行组件的嵌套
- 在全局组件的template属性中调用局部组件
- 局部组件定义在全局组件之前，才能调用
组件中的数据绑定data，data属性对应的是一个函数方法，函数中返回绑定的数据
- 在template中对指定的数据进行调用
组件传值
- 父组件通过props属性给子组件传值
  - 子组件中定义props:['用来接收父组件值的变量']
  - 子组件template中调用该变量{{变量}}
  - 全局组件中调用子组件时，通过v-bind:变量='父组件要传的值'指定父组件的传值
- 子组件通过$emit给父组件传值
  - 子组件template中绑定触发事件<button v-on:click="isupload"> 上传</button>
  - 子组件定义 methods：{isupload：function（）{this. $emit('事件'，’数据‘)}}，子组件上的点击事件成功后，通过$ emit 将事件和数据传递给父组件
  - 父组件的子组件标签中绑定监听事件（处理子组件的事件）
  - 父组件定义监听子组件事件的方法

单文件组件

单文件组件：将一个组件相关的html结构，css样式和交互的Javascript从html文件剥离出来，合成的文件（一个组件具有了结构、表现和行为的完整功能，方便组合和重用），扩展名为.vue
```
// 使用template标签来定义html部分
<template>

</template>
// javascript要写成模块导出的形式
<script>

</script>
// css样式
<style>

</style>
```

环境配置（单文件组件不能直接运行使用，依赖于node项目对其进行解析打包）

安装node版本管理工具nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc

安装最新版本的node
nvm install node
更新npm的安装源
npm config set registry https://registry.npm.taobao.org
创建项目目录
mkdir project

cd project
npm init
#初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块

配置package.json文件

{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "css-loader": "^0.28.11",
    "element-ui": "^2.7.2",
    "file-loader": "^1.1.4",
    "lodash": "^4.17.4",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-router": "^3.0.2",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
    }
}
#该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

安装项目依赖模块
npm install
- npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境
创建项目文件 main.js ,index.html, App.vue
touch index.html main.js App.vue.
- index.html文件时项目的首页文件
- main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件
- App.vue文件为单文件组件文件

创建webpacke打包的配置文件webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: { main: "./main.js" }, //入口文件
    output: {
        filename: 'index.js', //出口文件名
        path: path.resolve(__dirname), //当前目录
        library: 'index' // 打包后模块的名称
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module: {
        rules: [ //定义不同类型的文件使用的loader
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: 'vue-style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                options: {
                    minimize: true //添加
                }
            }, 
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
              },
        ]
    }
}
#在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染

目录创建完成后的结构

Snip20190404_1.png

单文件组件打包
- 项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码
- 项目打包npm run build
  - 文件编写完成后并不能直接运行index.html产生效果，需要对项目进行打包生成一个渲染后的index.js文件进行使用
  - 打包后会在当前目录下生成一个index.js 文件，在index.html中引用该文件，运行index.html文件看到效果
- 项目调试运行
```
// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码
./node_modules/.bin/webpack-dev-server
```
多个单文件组件使用
- 在project目录下创建components文件夹，将所有子组件放入components文件夹下
- 多组件嵌套使用
  - 在新建的components文件夹中定义多个子组件
  - 在App.vue的script标签中导入并注册多个子组件，在template标签中调用子组件
  - npm run build 重新生成index.js文件
- 多组件路由使用（使用路由形式阻隔多个单路由）
  - 定义路由目录和路由文件router.js
  - 在main.js文件中导入并使用router
  - 在App.vue中指明路由标签
  - 运行项目./node_modules/.bin/webpack-dev-server
Element-ui
- Element-ui将样式封装成单文件组件，可以直接集成到项目中
  -从网址element中复制一段div标签，即样式
- 将复制的样式复制到components中.vue文件的template标签中（在template中新添加div标签）
- 在router.js中添加该样式文件的路由匹配，进行分发操作
- 在main.jszhong 导入ElementUI并使用Vue.use(ElementUI)

vue-cli的使用

借助vue-cli创建出我们的所有项目文件
步骤
- 全局安装vue-cli npm install --global vue-cli
- 项目创建 vue init webpack 项目名
- 运行调试项目 npm run dev在项目目录下执行此指令
- 项目打包npm run build
生成的目录文件
- src，主开发目录，要开发的单文件组件全部在这个目录下
- static，静态资源目录，所有的css，js文件放在这个文件夹
- components，组件目录，vue格式的单文件组件都存在这个目录中
- router，路由目录，在此文件夹中配置组件路由
- node_modules目录是node的包目录
- config是配置目录，build是项目打包时依赖的目录
页面结构说明
- 整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
  
  Snip20190404_6.png

Vue组件

Vue组件

单文件组件

vue-cli的使用

推荐阅读更多精彩内容