执行
weex init testweex1
结构如下:
执行
npm install
结构如下:多了个node_modules文件夹
直接执行
npm run serve
结构如下:多了个config.js
这时候访问http://localhost:8080/index.html界面是空的,为什么能因为没有执行:
npm run dev
执行以后,结构如下:多了个dist文件夹
接下来就深入探讨下这几个命令干了什么:
先看看npm run dev
在搞什么事情,打开package.json
{
"name": "testweex",
"description": "testweex",
"version": "0.1.0",
"private": true,
"main": "index.js",
"keywords": [
"weex",
"vue"
],
"scripts": {
"build": "webpack",
"dev": "webpack --watch",
"serve": "node build/init.js && serve -p 8080",
"debug": "weex-devtool"
},
"dependencies": {
"vue": "^2.1.8",
"vue-router": "^2.1.1",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1",
"weex-vue-render": "^0.1.4"
},
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-preset-es2015": "^6.18.0",
"css-loader": "^0.26.1",
"ip": "^1.1.4",
"serve": "^1.4.0",
"vue-loader": "^10.0.2",
"vue-template-compiler": "^2.1.8",
"webpack": "^1.14.0",
"weex-devtool": "^0.2.64",
"weex-loader": "^0.4.1",
"weex-vue-loader": "^0.2.5"
}
}
npm run dev
干了webpack --watch
,webpack实际上是执行了默认的webpack.config.js配置文件。
webpack.config.js 引入webpack和weex-loader,entry属性是表示入口文件,output表示输出文件,默认输出到dist文件夹。