上一節，我們大概講了一個專案，構建了一個app，過程應該是挺艱辛的，現在我們來看看這張圖，以往我們都是用create，還記得嗎，今天開始，我們來用init，也就是vue的模式來構建專案，不必要用create
其實，大家肯定會有疑問，init和create有什麼區別呢？
結合勾三股四的話:
init初始化的專案是針對開發單個 Weex 頁面而設計的，也就是說這樣的專案只包括單個頁面開發需要的東西，比如前端頁面原始檔、webpack 配置、npm 指令碼等。專案產生的輸出就是一個 JS Bundle 檔案，可以自由的進行部署。
create是初始化一個完整的 App 工程，包括 Android 和 iOS 的整個 App 起步，前端頁面只是其中的一部分。這樣的專案最終產出是一個 Android App 和一個 iOS App。
詳解
weex init awesome-project
之後我們進入專案所在路徑，weex-toolkit 已經為我們生成了標準專案結構。
在 package.json 中，已經配置好了幾個常用的 npm script，分別是：
build: 原始碼打包，生成 JS Bundle
dev: webpack watch 模式，方便開發
serve: 開啟靜態伺服器
debug: 除錯模式
我們先通過 npm install 安裝專案依賴。之後執行 npm run dev 和 npm run serve 開啟watch 模式和靜態伺服器。
然後我們開啟瀏覽器，進入 http://localhost:8080/index.html 即可看到 weex h5 頁面。複製程式碼頁面就出來了
但是，我們開啟命令列工具，發現一直在報一個錯誤。
GET http://localhost:8080/node_modules/weex-vue-render/index.js 404 (Not Found)複製程式碼這個檔案是來模擬手機端的檔案，很明顯這個路徑錯誤的，導致我們上面看到的是空白的手機頁面，所以，我們在/weex.html裡面修改weex-vue-render/index.js的路徑
我早node包檔案裡面找到了這個，很明顯，路徑前面少了一個dist
加上dist之後，我們終於看到了正確的頁面(這裡真的有點坑，官方腳手架也能出錯)
我想，大家都已經會了vue2.0的基本語法了吧，我們來改改程式碼
nav.vue
<template>
<div class="wrapper">
<text class="txt">請輸入你對我的看法</text>
<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></input>
</div>
</template>
<script>
const modal = weex.requireModule('modal')
export default {
methods: {
oninput (event) {
console.log('oninput:', event.value)
modal.toast({
message: `oninput: ${event.value}`,
duration: 0.8
})
},
onchange (event) {
console.log('onchange:', event.value)
modal.toast({
message: `onchange: ${event.value}`,
duration: 0.8
})
},
onfocus (event) {
console.log('onfocus:', event.value)
modal.toast({
message: `onfocus: ${event.value}`,
duration: 0.8
})
},
onblur (event) {
console.log('onblur:', event.value)
modal.toast({
message: `input blur: ${event.value}`,
duration: 0.8
})
}
}
}
</script>
<style>
.input {
font-size: 50px;
width: 650px;
margin-top: 50px;
margin-left: 50px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
color: #666666;
border-width: 2px;
border-style: solid;
border-color: #41B883;
}
.txt{
color: green;
font-size: 50px;
}
</style>複製程式碼foo.vue
<template>
<div class="wrapper">
<text class="title">Hello {{target}}</text>
<nav></nav>
</div>
</template>
<style>
.wrapper {
align-items: center;
/* margin-top: 120px; */
}
.title {
font-size: 48px;
}
.logo {
width: 360px;
height: 82px;
}
</style>
<script>
import nav from './nav.vue'
export default {
data: {
logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
target: '大家好，我是乘風gg'
},
components: {nav},
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
}
}
}
</script>複製程式碼
然後，手機就會顯示安裝好後的頁面.
上面網頁除錯的佈局和手機的佈局不一樣啊，是不是我寫錯了呢？還真是我寫錯了（實在是坑，因為說好的三端統一，其實根本不是）先賣個關子。
這一節比較短，搭建環境和基本入門就到這了，其實教到這，大家都能直接去官網直接看 demo了，這個月月底比較忙，所以大家先去官網熟悉一下(沒有vue基礎的可以去看看vue基礎語法)，下一節我打算講講他的內建元件和模組，估計會有點無聊，我儘量結合例項吧。