安装过程很简单
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装后使用vue --version
查看是否安装成功
vue create demo
# OR
vue ui #使用ui界面进行创建
选项
我们选择手动选择功能,具体选择如下
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): LESS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
选择完成后自动安装依赖,据观察如果本地安装了yarn 的话,会使用yarn安装依赖。
cd demo
yarn serve
vue-cli 3生成的项目结构比2的要简单很多,去掉了build、config、等文件夹
根目录两个文件夹
除了两个文件夹还包括几个文件
还有一个可选的配置文件vue.config.js 默认是没有这个文件的,需要自己创建。
自用的几个配置项
module.exports = {
baseUrl: '', //用户部署的基本url,如果不配置默认为部署所在域的根目录,如果不要部署到子路径,则需要配置该项。如果设为空,转移后的使用相对路径引用文件。并且将所有的css js都放到了根目录
outputDir: 'www', //输出文件夹,我这里设为www,主要是和Cordova配合生成安卓应用的。
productionSourceMap: false, //不生成map
runtimeCompiler: true // 包含运行时编译器的 Vue 构建版本
};
首先构造Cordova项目结构
第一个就是静态文件存放目录,www文件夹,这就是配置outputDir
的原因
另外Cordova还需要res文件夹,存放icon,screen等。我是直接从Cordova生成项目中复制出来的。
最重要的是config.xml文件(也是复制过来的?)
<widget id="com.wugeek.zbyx" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>众邦优选name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
description>
<author email="[email protected]" href="http://cordova.io">
Apache Cordova Team
author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
<icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
<icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
<icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
<icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
platform>
<engine name="android" spec="^7.0.0" />
widget>
plugins和platforms文件夹不用手动建。会自动生成
然后添加安卓平台cordova platforms add android
最后编译运行cordova run android
值得注意的是,这个时候cordova 插件是有问题的,因为没有引用Cordova.js文件
所有在mian.js
中判断当前平台添加cordova.js
if (window.location.protocol === 'file:' || window.location.port === '3000') {
var cordovaScript = document.createElement('script');
cordovaScript.setAttribute('type', 'text/javascript');
cordovaScript.setAttribute('src', 'cordova.js');
document.body.appendChild(cordovaScript);
}
安装vue-cordova
这个插件,可以更方便访问Cordova的方法和属性
Vue.cordova.on('deviceready', () => {
console.log('Cordova : device is ready !');
});
PS :写的时候参考了cli/vue3 的官网,发现已经有了中文翻译了?。就在半个月前还没有,抠配置配了好长时间。各位还是去官网看教程吧,写的很详细。cli vue3 地址点此
生成release版本项目
cordova build android --release
生成签名文件(有的话就不需要了)
keytool -genkey -v -keystore my.keystore -alias demo -keyalg RSA -keysize 2048 -validity 10000
签名
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my.keystore app-release-unsigned.apk demo
写一个build.js再根目录自动完成,先把keystore文件放到根目录
{
"android": {
"release": {
"keystore": "my.keystore",
"alias": "demo",
"storePassword": "password",
"password": "password"
}
}
}