一、搭建Node.js环境
1、安装node的常见方法有两种
- 通过
HomeBrew安装 - 去官网下载安装包
文章图片
安装包
- 两种方法都试了一下，发现获得
node、npm版本不一致，官网下载的版本会低一点 - 且官网下载的版本，后面会遇到一些问题，所以我重新用
HomeBrew装了一遍
HomeBrew - 在终端输入以下指令
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 产看版本
brew -v - 卸载
HomeBrew
- cd `brew --prefix`
- rm -rf Cellar$ brew prune
- rm -rf Library .git .gitignore bin/brew README.md share/man/man1/brew
- rm -rf ~/Library/Caches/Homebrew
//如果没有权限，指令前加sudo
4、安装
Node.js brew install node- 查看安装结果
node -vnpm -v
npm 来安装 weex-toolkit - **注意: **weex-toolkit 目前仅有最新的 beta 版本开始才支持初始化 Vue 项目，使用前请确认版本是否正确。
npm install -g weex-toolkit@beta
cnpm$ npm install -g cnpm
$ cnpm install -g weex-toolkit@beta
- 如果提示权限错误
(permission error)，使用sudo关键字进行安装
sudo cnpm install -g weex-toolkit@beta
- 调用
weex指令检查
$ weexUsage: weex [options]
Usage: weex init [projectName]选项：
--porthttp listening port number ,default is 8081[默认值: 8081]
--wsportwebsocket listening port number ,default is 8082[默认值: 8082]
--outputto build the js bundle to the specify a path
[默认值: "no JSBundle output"]Usage:weex where is one of:debugstart weex debugger
compilecompile we/vue file
runrun your projectweex --helphelp on
二、初始化项目(与官网一致) 1、初始化项目
$ weex init awesome-project
2、安装项目依赖
npm install --unsafe-perm=true
- 这里不要忘了
--unsafe-perm=true，否则会加载失败
npm run dev
4、开启静态服务器
npm run serve
5、在浏览器中查看
http://localhost:8080/index.html
6、我们可以在
src/foo.vue中改写代码Hello Weex !
Hello Vue ! .wrapper {
flex-direction: column;
justify-content: center;
}
.weex {
font-size: 60px;
text-align: center;
color: #1B90F7;
}
.vue {
font-size: 60px;
text-align: center;
margin-top: 30px;
color: #41B883;
}【Weex入门(一)】三、运行结果
文章图片
运行结果
文章图片
log
