Cordova is a framework for developing apps by Hybrid. It uses JS to bridge the native API to realize some functions of JS calling native; I planned to learn Ali's weex; Wouldn't it be more cool to integrate a tool like Vue as a development interface?
1. Environment construction
> Cordova environment setup
Since we use cordova as the app development framework, we have to build cordova first; the installation of cordova can be installed using npm yarn, etc.; global installation: npm install -g cordova
Due to the need to package the app, android sdk or ios sdk is naturally required (xcode must be installed under the mac of local tyrants)
You can refer to the official website: http://cordova.apache.org/#getstarted
> vue environment construction
It's not difficult to build a vue environment, just follow the official website .
Installation of vue-cli: npm install -g vue-cli
2. Build the project
Creating a project is because cordova and vue are integrated, and vue uses webpack to debug and publish; therefore, it must be done in the way of cordova first and then vue ; however, you can try to create a vue project file first and then create a cordova project to see what errors will be reported.
> Build the cordova project
Create a project according to the official website example cordova create appName com.app.appName appName method, and generate the following structure project file:
Add android platform sdk: cordova platform add android
This is a standard cordova project directory, next we will add vue project files to this directory through vue-cli in this directory
> Build the vue project
Also install the vue official website example to create a vue project: vue init webpack appName ; note that the folder already exists at this time, whether to overwrite it, as shown below:
We choose Y to continue
Well, we built the vue project, entered the appName project directory, and installed the package npm install
Test vue: npm run dev normally opens http://localhost:8080/ that is normal
At this point the project structure is as follows:
3. Integrate vue into cordova
If you are familiar with cordova, the html page directory of cordova is stored in the www directory in the above figure, and now our vue source directory is under src, packaged and stored in the dist directory, cordova's entry file www/index. html mainly introduces cordova.js as a bridge, the following code:
<head>
<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 *">
<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">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
Comparing the above code with the code of the index.html file packaged by vue, we can find that cordova introduces Content-Security-Policy to set a looser resource loading policy and prevent xss attacks; we add it to the index of the root directory vue .html, and we also added cordova.js to the bottom of the page. Finally, the page code in our root directory is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<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 *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>vue-cordova-app</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
At this point, we can complete the integration as long as we can direct the target path of the vue package to the www directory.
The next step is to modify the webpack packaging of vue, (please ignore the webpack master)
- Modify config/index.js and modify ../dist to ../www
- Modify assetsSubDirectory to './'
- Modify assetsPublicPath to '/'
The above modification changes the webpack packaging target path to www, the resource path from dist/static/js to www/js directory, and dist/static/css to www/css directory.
Execute the command npm run build to package and try.
Finally try cordova run android
Okay, it's finally done...
Recently; I submitted the complete vue and cordova integration template project code to git https://github.com/lysuse/vue-cordova-app
Welcome star; you can use vue init lysuse/vue-cordova-app appName to initialize directly!