本節(jié)任務(wù)
- 搭建環(huán)境(mac) 開發(fā)流程講解
準備工作打開命令行輸入下面幾條命令
1.安裝node.js
brew install node
安裝 Node.js 環(huán)境成功后甸鸟，npm 包管理工具也會自動安裝成功
輸入下面命令檢查一下
$ node -v
v7.4.0
$ npm -v
4.0.5
2.安裝weex-toolkit
sudo cnpm install -g weex-toolkit
檢查安裝是否成功
weex -v
v1.0.4
-weex-builder : v0.2.6
-weex-devtool : v0.2.79
-weex-previewer : v1.3.6
第一步 創(chuàng)建一個文件目錄,這個目錄主要放我們的練習demo
-
第二步 代開命令行 'CD 路徑' 進入這個目錄中
cd /Users/xujie/Documents/weex
截圖
第三步使用 命令 初始化工程
weex init FirstProject
接下來在命令行窗口會出現(xiàn)一句話
prompt: Init your Project: (FirstProject)
輸入一個名字-這個名字就是整個項目的名稱
第四步 右擊->選擇瀏覽器打開index.html和weex.html文件
我把weex.html 里面的body 部分代碼截圖給大家看一下
很顯然里面有句代碼沒有解析出來,為什么呢? 沒有安裝相關(guān)依賴文件
-
第六步 安裝package.json 文件需要的插件和類庫
{ "name": "firstProject", "description": "firstProject", "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 install
工程中增加了一個文件夾 如下
此時你再使用瀏覽器打開index.html 文件
我們發(fā)現(xiàn)手機視圖中沒有內(nèi)容,這不太對勁,按理來說應(yīng)該有點內(nèi)容才對
再來看一眼weex.html中的代碼
大家注意到了沒有 在生成的文件夾中沒有dist這個目錄 以及app.web.js 文件
- 第七步 根據(jù)webpack.config.js文件中內(nèi)容進行打包處理
var path = require('path')
var webpack = require('webpack')
var bannerPlugin = new webpack.BannerPlugin(
'// { "framework": "Vue" }\n',
{ raw: true }
)
function getBaseConfig () {
return {
entry: { // 打包文件的入口
app: path.resolve('./app.js')
},
output: {
path: 'dist', // 打包完成后的文件存放的目錄
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.vue(\?[^?]+)?$/,
loaders: []
}
]
},
vue: {
},
plugins: [bannerPlugin]
}
}
// web使用的打包文件
var webConfig = getBaseConfig()
webConfig.output.filename = '[name].web.js'
webConfig.module.loaders[1].loaders.push('vue')
// 移動端 使用的打包文件
var weexConfig = getBaseConfig()
weexConfig.output.filename = '[name].weex.js'
weexConfig.module.loaders[1].loaders.push('weex')
module.exports = [webConfig, weexConfig]
我們可以看出一下信息
1.需要打包文件app.js
2.打包生成的文件app.web.js和 app.weex.js
3.生成文件存放的目錄 dist
接下來我們運行打包命令
npm run dev
此時我們再次使用瀏覽器打開index.html文件
看見旁邊還有一個二維碼,使用阿里提供的給我們的工具weex Playground 工具可以在手機上預(yù)覽效果
應(yīng)用商店都可以下載這個軟件
*第八步 我們看一下 app.js 文件的內(nèi)容
import foo from './src/foo.vue' // 導入組件
foo.el = '#root' // 設(shè)置組件id
export default new Vue(foo); // 輸出一個vue對象
- 第九步 foo.vue 就是我們的重點內(nèi)容了,我們主要要學會編寫里面的內(nèi)容
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { font-size: 48px; }
.logo { width: 360px; height: 82px; }
</style>
<script>
export default {
data: {
logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
target: 'World'
},
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
}
}
}
</script>
整個開發(fā)流程大體過了一遍,接下來就是掌握開發(fā)必須的知識點了
- 1.html基礎(chǔ)
- 2.css3
- 3.javascript 基礎(chǔ)
- 4.Vue.js
- 5.Vue-router
- 6.vuex
- 7.webpack
- 8.weex
- 9.vue-loader
提示
[iOS 工程師]和[android工程師們] 快來入坑吧,現(xiàn)在是跨平臺的時代,在同一時期,阿里推出weex,騰訊推出微信小程序,都在解決一個問題,降低開發(fā)成本,提供生產(chǎn)效率!
