執行
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文件夾。