关于的VUE的webpack初次综合使用
具体编程
上一篇发现图片导入失败,这次再发一遍。。。
① 检查webpack是否安装成功:
打开Windows命令提示符【Win + R 输入 " cmd “】,输入” webpack -v ",回车。
显示了版本号则证明安装成功。不成功的先把这一关自己想办法过了。
② 创建项目和基本操作
-
新建一个普通的空项目【empty】
放置基本的的文件夹和 index.html
src 文件夹 用于存放源码 main.js 模块入口 . js文件,存放依赖关系
dist 文件夹 存放 打包后 的的 . js 文件
vue 文件夹 放置在src之下—没有实际意义,只是用来存放分离开来的vue.js文件的 appvue.vue 放置在vue之下,是自制的 . vue文件,存放模块内容
index.html 测试页面—建于根目录下即可,
webpack.config.js 配置文件—注意文件类型JavaScript
这是完整实例的图片,刚创建时并没有这些内容,前面创建只要按着我打的内容创建就好了------
③ 代码内容
先说模块入口的 main.js 怎么写
import Vue from 'vue'
import apptem from '../src/vue/appvue.vue';
// import apptem from './vue/app.js'
const app = new Vue({
el:'#app',
template:'<apptem/>',
components:{
apptem
}