首先，你如果想要配置.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
<style>
</style>
<template>
<h1>我是app组件</h1>
</template>
<script>
</script>
写法1：
修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./public/bundle.js"></script>
</body>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script type="text/javascript" src="./public/bundle.js"></script>
</body>
</html>
app.js
import Vue from "vue";
import app from "./app.vue"
new Vue({
el: "#app",
components:{
app
}
})
http://localhost:8080/
打开 app.vue
将 <h1>我是app组件</h1>
改为
<h1>我是app组件1</h1>
<h1>我是app组件2</h1>
Error compiling template:
<h1>我是app组件1</h1>
<h1>我是app组件2</h1>
- 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
将
<h1>我是app组件1</h1>
<h1>我是app组件2</h1>
改为
<div>
<h1>我是app组件1</h1>
<h1>我是app组件2</h1>
</div>
http://localhost:8080/
打开 app.vue
修改如下
<style>
</style>
<template>
<div>
<h1>{{a}}</h1>
</div>
</template>
<script>
export default{
data(){
return{
a : 1
}
}
}
</script>
在组件里面 script 有一个 固定写法的事。data不再是对象了 data变成函数了
http://localhost:8080/
调整stylus样式
打开 app.vue
修改如下
<style>
</style>
如下
<style lang='stylus' scoped>
div{
h1{
color: red;
}
}
</style>
说明:
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 特征码 防止样式冲突的
是 <style scoped lang='stylus' > 中的 scoped 起的作用
scoped 是给组件添加一个 data属性的 8位随机码 ，防止组件和组件之间的样式冲突
