vue基础篇 09 webpack基础(二)

09 webpack基础(二)

引入vue.js

npm代码

npm install vue --save

并且在入口js文件 main.js中写入

import Vue from 'vue'

const app = new Vue({
	el:'#app',
	data:{
		message:'msg'
	}
});

并相应的在index.html中写入

<div id="app">
	{{message}}
</div>

最后执行

npm run build

打开index.html预览发现并没有效果，直接显示了

{{message}}

打开控制台发现出现了这样的错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

大概意思是这个vue在运行时不能使用，那么我们就相应的换一个，在webpack.config.js中写入

resolve:{
    alias:{
        'vue$':'vue/dist/vue.esm.js'
    }
}

再次执行

npm run build

index.html的预览就变成

msg

el和template区别

• 正常运行之后，我们来考虑另外一个问题：

  • 如果我们希望将data中的数据显示在界面中，就必须是修改index.html

  • 如果我们后面自定义了组件，也必须修改index.html来使用组件

  • 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

• 定义template属性：

  • 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容

  • 这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素

  • 但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？

  • 我们可以再定义一个template属性，代码如下：

    main.js

    import Vue from 'vue'
    
    const app = new Vue({
    	el:'#app',
    	template:`
    	<div id="app">{{message}}</div>
    	`,
    	data:{
    		message:'msg'
    	}
    });
    

    index.html

    <div id="app"></div>
    

    效果与前面描述的一致

Vue组件化开发引入

和之前不用webpack一样，组件化开发的优势还是一样的，语法上也没有太大的改变

main.js

const cpm = {
	template:`<h1>组件</h1>`
}

const app = new Vue({
	el:'#app',
	template:`
	<div id="app">{{message}}<cpm/></div>
	`,
	data:{
		message:'msg'
	},
	components:{
		cpm
	}
});

.vue文件封装处理

用一个js包装一个组件依然不方便，比如css位置不知道应该放在哪里合适，这时候就引进一个新方式来组织一个vue组件,.vue

vueCpm.vue

<template>
	<h3>
		.vue文件{{good}}
	</h3>
</template>

<script>
	export default{
		name:"vueCpm",
		data(){
			return {
				good:'牛逼啊'
			}
		}
	}
</script>
	
<style>
	h3{
		background-color: #00FFFF;
	}
</style>

main.js

import vueCpm from 'vue/vueCpm.vue'
const app = new Vue({
	el:'#app',
	template:`
	<div id="app">{{message}}<cpm/><vueCpm/></div>
	`,
	data:{
		message:'msg'
	},
	components:{
		cpm,vueCpm
	}
});

新的文件类型自然也需要新的loader

• 安装vue-loader和vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

ps：需要css-loader

plugin

插件：通常是用于对某个现有的架构进行扩展，

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等

这里就不仔细介绍了

搭载本地服务器

它是一个单独的模块，在webpack中使用之前需要先安装它，npm代码

npm install --save-dev webpack-dev-server@2.9.1

需要在webpack.config.js添加devserver选项

• contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
• port：端口号
• inline：页面实时刷新
• historyApiFallback：在SPA页面中，依赖HTML5的history模式

package.json中可以配置另一个srcipts

"dev":"webpack-dev-server --open"