vue学习：8、模块初始

2019独角兽企业重金招聘Python工程师标准>>>

建立文件夹 modul001

新建module001.html文件

<div id="app"></div>
<script type="text/javascript" src="./build.js">

新建main.js文件,其中vue.js保存在文件夹modul001文件夹下

//整个程序的入口

import Vue from './vue.js';

import App from './App.js';

new Vue({
	el: '#app',
	components: {
		app: App
	},
	template: '<div><app/></div>'
});

新建App.js文件

var app={
	template:`<div>我是组件app</div>`,	
}

export default app;	//app这个名字随意

打开cmd,进入到当前目录

npm init -y                        //初始化包
npm i webpack@3.6.0 -s  //初始化  

npm un webpack  -s       //卸载

修改package.json文件，指出文件的入口与出口

{
  "name": "module001",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack ./main.js ./build.js"		//入口./main.js   出口./build.js
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.6.0"
  }
}

执行 npm run build       //build 是配置文件里的

然后会在文件夹下生成 build.js

运行module001.html

结果如下

转载于:https://my.oschina.net/qingqingdego/blog/2874800