MENU

Cordova&Vuetifyjs项目框架搭建

December 27, 2018 • Read: 1676 • 笔记阅读设置

Cordova&Vuetifyjs项目框架搭建


修改日期:2019年1月2日
版本:v1.1
作者:whl


[toc]


一、 基础环境搭建(Mac)

1. 安装Xcode

Mac商店搜索Xcode下载安装。

2. 安装Vue-cli

# npm
npm install -g @vue/cli

# yarn
yarn global add @vue/cli

# 查看vue-cli安装版本
vue -V

4. 安装Cordova

# 安装Cordova
npm install -g cordova

# 查看Cordova安装版本
cordova -v

# 安装iOS命令行工具
npm install -g ios-deploy --unsafe-perm=true

# 安装Xcode包管理工具
gem install cocoapods

由于cocoapods源位于Github,故需配置本地git代理,加速下载。


# 需配置git本地代理加速访问
# 如shadowsocks  sock5 代理

# 配置git本地代理
# 1086为sock5本地代理端口

git config --global http.https://github.com.proxy socks5://127.0.0.1:1086
git config --global https.https://github.com.proxy socks5://127.0.0.1:1086

配置完git代理后,安装cocoapods。

# 安装cocoapods
# 下载500M+,需耐心等待,若报错请重新执行。
pod setup

二、 创建Vuetify初始项目

1. 新建Vue项目

# 使用vue-cli创建新项目

vue create vuetify-test

若中途不慎操作错误,可按Control + C退出当前会话,重新执行vue create命令。

选择手动配置模式

image_1cuu4dernjh7ptc1rul1bjojvo9.png-66.2kB

按上下键移动光标,空格键选择相应选项,完成如图所示配置。

详细配置项说明:

  1. Bable-开启。Javascript转码工具,必须启用。
  2. TypeScript-关闭。TypeScript是Javascript的超集,可编译成纯Javascript。TypeScript类型声明等方面提供了增强。现有项目以Javascript为主,不需TypeScript。
  3. Progressive Web App (PWA) Support-关闭。移动端页面增强,不需要。
  4. Router-开启。Vue-Router组件,提供前端路由相关功能,需开启。
  5. Vuex-开启。Vue状态管理组件,需开启。
  6. CSS Pre-processors-开启。CSS预处理功能,用于支持SCSS、LESS、Stylus,需开启。
  7. Linter / Formatter-开启。语法及编码规范检查,需开启。
  8. Unit Testing-关闭。测试工具,大型项目使用,关闭。
  9. E2E Testing-关闭。测试工具,大型项目使用,关闭。

image_1cuu4fp0m1uru1jddefk1lrd1d9km.png-93.6kB

是否开启Vue-Router history模式,默认开启即可。History模式会省略Vue项目URL路径中的‘#’,浏览体验更接近于传统页面。

image_1cuu8at6p1npfbmp1d541ie81n0f9.png-90.4kB

CSS预处理器,选择Sass/SCSS。Sass/SCSS对原生CSS兼容性更好,可直接使用现有CSS代码。Vuetify使用了Stylus,因此Stylus也需了解使用。

image_1cuu8i0501fitjd51bq4go211oj16.png-108.9kB

选择Linter / Formatter配置。默认配置即可。

image_1cuu8o4p5ecqks615rd1tef1a871j.png-128.4kB

选择Linter / Formatter额外配置。默认配置即可。

image_1cuu8q52g121vcpl19211bjijhc2d.png-132.2kB

选择配置文件保存位置。选择独立文件,独立配置文件对IDE的支持更好。

image_1cuu8tovaisu1p701srqvuhl6a2q.png-146.5kB

是否保存为模版供未来项目使用。可选择保存。输入模版名保存即可。

image_1cuu92a7u1oit1n061cq71tbnun237.png-148.7kB

开始创建项目安装依赖。

image_1cuu9d0da1k78108b1bhi1rr92ro41.png-203.6kB

创建完成。

image_1cuu9bsd01mou192u145cnp01hsc3k.png-199.3kB

2. 添加Vuetify

# 切换至项目目录
cd vuetify-test

# 添加Vuetify

vue add vuetify

安装成功,选择高级配置模式。

image_1cuu9kvrd1g71t9j1ib76ne1ndc4e.png-193.9kB

是否替换Vue默认App.vue和HelloWorld.vue。默认是即可。

image_1cuu9lmbporr1frnc7ejnh1no34r.png-196.3kB

是否使用自定义主题。输入y启用,开启自定义功能。
是否使用自定义CSS变量。输入y启用,开启自定义功能。

image_1cuu9s5o316431du2sduj501j0b5l.png-207.2kB

选择图标字体。默认第一个即可。

image_1cuu9tcm91upv1dqgbvc1625m6l9.png-201.2kB

是否将字体添加为项目依赖。选择是,否则会将自己文件在html头部引用,影响加载效率。

image_1cuu9vv1ae718p01pr5mrs1fau1l.png-198.8kB

是否使用a-la-carte组件。默认是即可。
选择本地语言。按下方向键,选择简体中文。

image_1cuua3p5a1i7t1aog61bksa19vi22.png-192.3kB

开始安装。
image_1cuua8csd14theqd1cdn1fav1k132f.png-203.3kB

安装完成。

image_1cuua99s3jv9h5eb601jb41qtk2s.png-176.1kB

查看安装效果。

# 启动dev-server
npm run serve

3. 添加Cordova

# 添加Cordova
vue add cordova

命名Cordova文件夹。默认即可。

image_1cuual1sc1g1km0i1u4s1mdf1rg439.png-177.1kB

输入App ID。应用商店发布ID。
image_1cuuarjsgs537i01p7b19qb1qd146.png-202.2kB

输入应用名称。App显示名称。
image_1cuuau69v1ju9idm1rub1pfeq5a4j.png-200.2kB

选择平台。空格选择Android及iOS。

image_1cuuavv2e1ccc1uhmu0b8fuc1b50.png-187.5kB

开始添加。

image_1cuub1o4t104pgjrlhqgd491h5d.png-205.1kB

添加完成。

image_1cuub2d177971bae6fn1oef1rk35q.png-168.7kB

三、 部署Vuetify项目

1. 开发模式启动

npm run serve

使用Xcode打开项目目录下的/src-cordova/platforms/ios文件夹。

image_1cuudccqt6om1jel1vb6h721amj71.png-92.6kB

配置项目Team。

image_1cuuddm6jnjp1lvk1oq2d1j17jg7e.png-500.9kB

Xcode会自动修复生成描述文件,将描述文件拖到其它文件夹保存备用。

image_1cuudfk7ftb01nsdqe1v845oe7r.png-227.5kB

用数据线连接电脑与手机,打开设备与模拟器,选择实际设备,导入描述文件。
image_1cuudiloagft1e7e1omogumqd88.png-179.1kB

image_1cuudlajk7271dr4spc1ve9q3q9i.png-113.9kB

image_1cuudkmu3pvkp0j159h174ltbv95.png-100.8kB

选择实体设备,启动。
image_1cuufptl41a741sds1etb1rj8mlu9v.png-270kB

image_1cuufsh031vig18idlrqpc01uruac.png-408.1kB

四、 注意事项

1. cordova-serve-ios 报错

禁止同时运行多个cordova-serve-ios服务。需先将之前进程结束,再启动新cordova-serve-ios服务。

Last Modified: January 16, 2019