6-3 vue-router、vue-cli和单文件组件-单文件组件

目录：

简介(vue.js官网：单文件组件)
单文件组件步骤
组件导入

一、简介

1.1、.vue文件

.vue文件，称为单文件组件，是vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js。

.vue文件由三部分组成：<template>、<style>、<script>

<template>
    //html 标签
</template>

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

<script>
    //js 代码
</script>

1.2、vue-loader(.vue文件加载器)

浏览器本身并不认识.vue文件，所以必须对.vue文件进行加载解析，此时需要 vue-loader(.vue文件加载器)。

类似的loader还有很多，如：html-loader、css-loader、style-loader、babel-loader等。

需要注意的是：vue-loader是基于webpack的

1.3、webpack

webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模板来使用和处理。实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件。

简单来说：webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出。

webpack官网：http://webpack.github.io/

webpack版本：v1.x，v2.x(目前使用)

webpack有一个核心配置文件：webpack.config.js，这个文件必须放在项目根目录下。

二、单文件组件步骤

2.1、创建项目

目录结构如下：(手动创建)

webpack-demo               //项目名
    |-index.html           //挂载文件(id=app)
    |-main.js              //入口文件(new Vue().$mount('#app'))
    |-App.vue              //vue文件
    |-components           //自定义组件文件夹
        |-Users.vue
    |-package.json         //工程文件
    |-webpack.config.js    //webpack配置文件
    |-.babelrc             //babel配置文件

初始化package.json工程文件：

D:\PycharmProjects\vue\webpack-demo>cd webpack-demo   #进入项目
D:\PycharmProjects\vue\webpack-demo>npm init --yes    #初始化package.json工程文件
Wrote to D:\PycharmProjects\vue\webpack-demo\package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "dependencies": {},
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

2.2、编写App.vue

<template>
    <div id="box">
        <h1>欢迎来到高哥哥的博客园!!!</h1>
        <h2 @click="change">{{name}}</h2> <!--定义事件，其他的跟我们一样-->
    </div>
</template>

<script>
    //console.log(111);
    export default { //通过export default导出模块
        data(){  //数据存储
            return {
                name: 'tom'
            }
        },
        methods:{  //事件方法
            change(){
                this.name = "汤姆";
            }
        }
    }
</script>

<style>
    body{
        background-color: #ccc;
    }
</style>

2.3、安装相关模板

注意：如果cnpm 不存在的话，也可以用npm安装

//单独写法：
cnpm install vue -S  # 安装 vue模块

cnpm install webpack -D  #安装webpack，开发时依赖
cnpm install webpack-dev-server -D #安装webpack静态服务期
cnpm install webpack-cli -D

cnpm install vue-loader -D  #安装vue-loader,开发依赖
cnpm install vue-html-loader -D #安装html-loader
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D  #这个项目中用到的字体、字库等，会用到

cnpm install babel-loader  #想要用ES6 语法
cnpm install babel-core -D
cnpm install babel-preset-env -D  #根据配置的运行环境自动启用需要的babel插件

cnpm install vue-template-compiler -D #预编译模板

//合并写法： 
cnpm install webpack webpack-dev-server webpack-cli vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core  
babel-preset-env vue-template-compiler -D

当我们安装完 vue 模块之后， package.json文件中会显示相关vue的依赖：

D:\PycharmProjects\vue\webpack-demo>npm install vue -S

点击查看：package.json 工程文件

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^2.6.11"    #安装完之后，package.json 多了一个 vue的依赖
  },
  ......,
  ......
}

2.4、编写main.js

注意：main.js是入口文件

main.js:

/**
 * 使用ES6语法引入模板
 */

import Vue from 'vue'  //1.引入内模块，表示 引入之后 会自动到 node_modules中去查找，因为我之前npm安装的vue等模块，都是在 node_modules中
import App from './App.vue'   //3.引入自定义模块，自己创建的 App.vue引入进来，虽然在同一层目录下，但是不能按照引入内模块方式引入

//2.创建vue实例
new Vue({
    //#app在index.html的入口文件中
    el:'#app',

    //4.我们直接用render函数去渲染,我们给函数传递一个参数，然后把我们自定义的组件注册进去就行了。
    render: function(h){ //function(h){return h(App);} 等同于 h =>{return h(App);} 等同于 h => h(App);
    　　return h(App);
　　}
});

看到 vue实例的时候，el: '#app' 这个是哪里来的呐，需要跟index.html中的div容器中的id一致：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
    <div id="app"></div>   <!--这边id的值是什么无所谓，但是要跟main.js中的el的值一致-->
</body>
</html>

很纳闷，我们之前不是用 components 选项注册组件的嘛，如下：

new Vue({
   el: "#app",
   components:{
          'my-app': APP  #在webpack中不是这么注册组件的，建议用另外一种 render的方式渲染组件，说白了render等同于components，只不过现在更喜欢用render函数渲染
   } 
})

所以说在webpack中还是老老实实用 render函数渲染组件吧。

2.5、编写 webpack.config.js

webpack.config.js：

module.exports = {
    //配置入口文件
    entry: './main.js',  //入口文件不是随便配置的，需要在webpack.config.js中配置
    //配置入口文件输出位置
    output:{
        path: __dirname, //默认是根路径，但是我们可以指定__dirname值，就是根路径
        filename: 'build.js' //出口文件是你自己定义的，叫什么无所谓，通常叫build.js，需要在index.html手动引入出口文件build.js
    },
    //配置模块加载器
    module:{
        rules:[
            {
                test:/\.vue$/,   // 固定格式 test: 匹配.vue文件正则表达式
                loader: 'vue-loader'  //识别.vue文件，都是用vue-loader加载器
            },
            {
                test:/\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ //node_modules目录下有很多js文件，我们需要排除掉
            }
        ]
    }
};

因为设置你的出口文件，所以你要在index.html中必须手动引入：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
    <div id="app"></div>
    <script src="build.js"></script> <!--手动引入出口文件build.js-->
</body>
</html>

2.6、编写.babelrc

{
    "presets": [   //配置  npm install babel-preset-env -D 安装的插件
      ["env",{"module": false}]  //并且这边还需要传递一个参数：{"module": false}
  ]
}

2.7、编写package.json

说明：

dev:运行时脚本的名称，叫什么都行，一般开发的时候叫 dev

　webpack-dev-server：实际我要启动的一个服务器

　　 --open：启动后打开浏览器

　　--hot：热加载，如果有代码更新，页面那边也自动刷新

　　 --port 8800：指定端口，默认8080

{
  .......,
  "main": "main.js",
  "scripts": {
   "dev": "webpack-dev-server --open --hot --port 8800"  #修改运行脚本
  },
  .......
}

2.8、运行测试

npm run dev   # dev 指的是 "dev": "webpack-dev-server --open --hot --port 8800" 中的 "dev"名称

三、导入模块

我们在项目下创建 components下的创建一个 User.vue 组件，目录结构如下：

webpack-demo
    |-index.html           
    |-main.js            
    |-App.vue           
    |-components           //自定义组件文件夹
        |-Users.vue          //创建用户组件
    |-package.json       
    |-webpack.config.js   
    |-.babelrc

3.1、User.vue组件内容：

<template>
    <div class="user">
        <h2>用户列表</h2>
        <ul>
            <li v-for="value in users">{{value}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                users:['tom','jack','alice','mike']
            }
        }
    }

</script>

<style scoped>  /*scoped 表示该样式只在当前组件中有效，防止你的组件间样式冲突*/
    .user h2{
        color: blue;
    }
</style>

这边需要注意：

<style scoped>  /*scoped 表示该样式只在当前组件中有效，防止你的组件间样式冲突*/
    .user h2{
        color: blue;
    }
</style>

3.2、在App.vue中导入 User.vue组件：

<template>
    <div id="box">
        ....

        <User></User>

        <!--之前这么用，不过现在不推荐-->
        <my-user></my-user>
    </div>
</template>

<script>
    // 导入模块
    import User from './components/User.vue'
    export default {
        .......
        comments:{
            'my-user':User, //可以这样写，但是一般不用
            User   // (缩写) 等同于 User:User
        }
    }
</script>

<style>
    ....
</style>

posted @ 2020-03-17 10:11 帅丶高高阅读(277) 评论(0) 收藏举报

刷新页面返回顶部

极其内向的帅小伙