VUE---webpack和自制vue简单使用案例

关于的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
    }