配置.vue文件的组件

首先，你如果想要配置.vue文件的组件的话，一定要提前安装好vue配置哦~~

好的，话不多说，开始配置：

配置.vue文件的组件

https://cn.vuejs.org/v2/guide/components.html

先安装vue-loader 这个依赖能翻译.vue文件

vue-loader  官网 https://vue-loader.vuejs.org/zh-cn/

      cnpm install --save-dev vue-loader

peerDependencies WARNING vue-loader@* requires a peer of css-loader@* but none was installed

peerDependencies WARNING vue-loader@* requires a peer of vue-template-compiler@^2.0.0 but none was installed

      安装完成之后 提示 需要安装 css-loader 和 vue-template-compiler

cnpm install --save-dev vue-template-compiler css-loader

修改 webpack.config.js 文件

vue-loader  官网 https://vue-loader.vuejs.org/zh-cn/

点击左侧 配置 下面的  预处理器

在

        {

            test: /\.js?$/,

            exclude: [

                path.resolve(__dirname, "node_modules")

            ],

            loader: "babel-loader",

            options: {

                presets: ["es2015"]

            }

        }

下面加入

      , {

            test: /\.vue$/,

            loader: 'vue-loader',

            options: {

                loaders: {

                    //stylus 语法

                    stylus: 'vue-style-loader!css-loader!stylus-loader'

                }

            }

        }

在vue-loader V15的版本中,需要在webpack.config.js中加入相应的插件.具体做法如下:

1.在webpack.config.js的头部引入插件:

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

2.在导出的配置中添加插件:

module.export = {

  ... //之前配置不变

  plugins: [

    new VueLoaderPlugin()

  ]

}

在          const path = require('path');

下面加入    const VueLoaderPlugin = require('vue-loader/lib/plugin');

在

resolve: {

        alias: {

            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

        }

    }

下面加入

,

    plugins: [

        new VueLoaderPlugin()

    ]

注意:

sublime text 安装 vue 插件

Preferences->Package Control

输入  install  package 回车

Preferences->Package Control

输入  vue

找到  vue syntax hightlight    安装即可

在右下角 切换  vue component

右键  app  ---  new  file  name:  app.vue

写法1：

修改 index.html

app.js

import Vue from "vue";

import app from "./app.vue"

new Vue({

    el: "#app",

    render:h => h(app)  //h就是一个名字随意起

})

在app.js里面 需要 用import 引入那个组件 然后 在 进行 render:h => h(app)

    npx  webpack

    npm run start:dev

    http://localhost:8080/

写法2：

index.html

app.js

import Vue from "vue";

import app from "./app.vue"

new Vue({

    el: "#app",

    components:{

    app

    }

})

http://localhost:8080/

打开  app.vue

将 

我是app组件

改为

   

我是app组件1

   

我是app组件2

Error compiling template:

 

我是app组件1

 

我是app组件2

  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

注意：vue2中 的.vue文件的组件里面不允许存在 片断实例  否则就会报错！！  vue1允许

解决办法 就是将它们包进一个 div 标签里面就可以了

打开 app.vue

将

   

我是app组件1

   

我是app组件2

改为

       

           

我是app组件1

           

我是app组件2

       

http://localhost:8080/

打开 app.vue

修改如下

在组件里面 script 有一个 固定写法的事。data不再是对象了  data变成函数了

http://localhost:8080/

调整stylus样式

打开 app.vue

修改如下

如下

说明:

  lang='stylus' 开启stylus 语法

  scoped 是给组件添加一个 data属性的 8位随机码 ，防止组件和组件之间的样式冲突

http://localhost:8080/

  刷新浏览器 报错了  是因为没有安装stylus 等依赖

  cnpm install --save-dev stylus-loader stylus

打开 webpack.config.js

修改

{

            test: /\.vue$/,

            loader: 'vue-loader',

            options: {

                loaders: {

                    stylus: 'vue-style-loader!css-loader!stylus-loader'

                }

            }

如下

            {

                test: /\.stylus$/,

                use: ['style-loader', 'css-loader', 'stylus-loader']

            }

            , {

                test: /\.vue$/,

                loader: 'vue-loader'

            }

    npx  webpack

    npm run start:dev

    http://localhost:8080/

  查看 源代码  找到 div中的属性  如  data-v-f4728ed6 特征码　防止样式冲突的

　是