New project cordova / vuejs

https://itnext.io/make-hybrid-platform-cordova-vue-webpack-2fb7031c4f9b

$ cordova create projectname com.f1lt3r.hybridbase

$ vue init webpack projectname

Target directory exists. Continue? Y

Setup le projet avec les composants dont vous avez besoin => je prends généralement seulement le router car je fais des petits projets

$ cd projectname

$ npm run dev

$ sudo rm -r www/*

Supprimer le contenu du dossier ./www => supprimer dossier css/js/img/index.html

Modifiez le fichier ./config/index.js comme ceci:

build: {
index: path.resolve(__dirname, '../www/dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../www/dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '', // supprimer le contenu des quotes
}

Ouvrez le fichier ./config.xml

Ouvrez le fichier ./index.html

Modifier la ligne suivante comme ceci :

< content src=”dist/index.html” />

ajouter la meta suivante:

< meta http-equiv="Content-Security-Policy" content="default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’; style-src ‘self’ ‘unsafe-inline’; media-src *; img-src ‘self’ data: content:; connect-src ‘self’ ws:;">

Ajouter la plateform android:

$ cordova platform add android

Run sur la plateform android:

$ cordova run android

Ajouter platform ios

$ cordova platform add ios

Ouvre xcode avec votre projet et changer la team:

Build android:

$ cordova build ios

Run android:

$ cordova run ios

Ajouter font VueJS / webpack

$ npm install less-loader less

Ajouter cette règle dans votre fichier webpack.base.js

{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
] // compiles Less to CSS
}

Ensuite dans votre fichier .vue

< style lang="less">
@font-face {
font-family: 'IndieFlower';
src: url('assets/styles/fonts/IndieFlower.ttf')
}
h1{
font-size: 70px;
font-family: 'IndieFlower', Helvetica, Arial, sans-serif;
}