This article mainly introduces how to use Cordova to package Vue projects. It also introduces in detail how to package Vue projects into apps. It has certain reference value. If you are interested, you can learn more. I hope it can help everyone.
Nowadays, more and more developers in China are using Vue to develop hybrid apps. However, after everyone has completed the development, they find that they don’t know how to package the Vue project into an app.
As far as I know now, the most popular way to package Vue projects is to use weex and cordova. Weex is provided by Alibaba and highly recommended by the author of Vue. If you are interested, you can learn and use it. Because I work in angular+ionic, I prefer cordova. Now I will teach you how to use cordova to package Vue projects:
Step 1: Install cordova
If it has been installed, skip it directly, otherwise execute the following command:
npm install -g cordova
If this command will not run, then I suggest you not to continue reading.
Step 2: Create a new cordova project
Execute the command
##
cordova create cordovaApp com.cordova.testapp cd cordovaApp cordova platform add android
Step 3: Modify the vue project
If you don’t have a vue project, go to Baidu to create a new vue project. First modify the index.html of the vue projectAdd<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:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
This may cause the page style to change. If it changes, do not add it. Otherwise, it is recommended to add it.
<body> <p id="app"></p> <script type="text/javascript" src="cordova.js"></script> <!-- built files will be auto injected --> </body>
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ document.addEventListener('deviceready', function() { new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) window.navigator.splashscreen.hide() }, false);
assetsSubDirectory: 'static', assetsPublicPath: '/',
assetsSubDirectory: '', assetsPublicPath: '',
npm run dev
Step 4: Put the vue file into the cordova project and package it
Run it in the vue project first
npm run build
cordova build android
Friendly reminder:
If the vue project encounters problems when running npm run dev or npm run build, which is generally not a code error, you can delete the node_modules folder and use it. npm install installation.{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } },
#vue project home page loading speed optimization example sharing
Sharing about common components and framework structures of vue projects
The above is the detailed content of How Cordova packages Vue projects. For more information, please follow other related articles on the PHP Chinese website!