133 lines
4.3 KiB
Markdown
133 lines
4.3 KiB
Markdown
# Vue 工程创建
|
||
|
||
1. 创建 Vue 需要用到的 cli 安装
|
||
|
||
npm install -g @vue/cli
|
||
|
||
2. 创建vue工程
|
||
|
||
vue create vue-app
|
||
|
||
3. 点击回车后，会进入选取项目特征页面，这里我们选择手动选取
|
||
|
||
Vue CLI v5.0.1
|
||
? Please pick a preset:
|
||
Default (\[Vue 3] babel, eslint)
|
||
Default (\[Vue 2] babel, eslint)
|
||
❯ Manually select features
|
||
|
||
4. 配置特征
|
||
|
||
Vue CLI v5.0.1
|
||
? Please pick a preset: Manually select features
|
||
? Check the features needed for your project: (Press \<space> to select, <a> to toggle all, <i> to inv
|
||
ert selection, and \<enter> to proceed)
|
||
◉ Babel
|
||
◯ TypeScript
|
||
◯ Progressive Web App (PWA) Support
|
||
◉ Router
|
||
◉ Vuex
|
||
◯ CSS Pre-processors
|
||
❯◯ Linter / Formatter
|
||
◯ Unit Testing
|
||
◯ E2E Testing
|
||
|
||
5. 选择Vue的版本，这里选择3.x
|
||
|
||
Vue CLI v5.0.1
|
||
? Please pick a preset: Manually select features
|
||
? Check the features needed for your project: Babel, Router, Vuex
|
||
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
|
||
❯ 3.x
|
||
2.x
|
||
|
||
6. ==下一项需要注意，会提示我们是否使用history的路由形式，如果是浏览器可以选择这种路由，但是在cordova中并没有history对象，所以这里需要输入 n ，选择不适用history的模式==。
|
||
|
||
Vue CLI v5.0.1
|
||
? Please pick a preset: Manually select features
|
||
? Check the features needed for your project: Babel, Router, Vuex
|
||
? Choose a version of Vue.js that you want to start the project with 3.x
|
||
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
|
||
n
|
||
|
||
7. 选择配置文件位置，使用默认选项即可
|
||
|
||
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
|
||
❯ In dedicated config files
|
||
In package.json
|
||
|
||
8. 对未来项目的预置
|
||
|
||
? Save this as a preset for future projects? (y/N) n
|
||
|
||
完成上述工作，等待项目自动初始化即可。
|
||
|
||
# Vue 工程改造
|
||
|
||
1. 在Vue的index.html中引入cordova.js（这里的cordova.js是在cordova工程中生成的，所以在vue项目中是找不到这个文件的。）
|
||
|
||
```html
|
||
// vue/public/index.html
|
||
<script src="cordova.js"></script>
|
||
```
|
||
|
||
1. 修改Vue默认打包位置，创建或者修改 Vue 根目录下的 vue.config.js 文件（默认为 dist，改成cordova工程目录中的前端源码目录 www。）
|
||
|
||
```javaScript
|
||
// const { defineConfig } = require('@vue/cli-service')
|
||
// module.exports = defineConfig({
|
||
// transpileDependencies: true
|
||
// })
|
||
module.exports={
|
||
outputDir:'../myCordovaApp/www'
|
||
// 指定加载路径
|
||
publicPath:'./'
|
||
}
|
||
```
|
||
|
||
1. 在Vue 的index.html 中引入Cordova 的 meta 标签
|
||
|
||
```html
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<!-- 与 cordova 工程中重复的，注释掉，使用cordova中的meta标签 -->
|
||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
|
||
|
||
<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="initial-scale=1, width=device-width, viewport-fit=cover">
|
||
<meta name="color-scheme" content="light dark">
|
||
```
|
||
|
||
1. 为 index.html 添加 deviceready 事件（vue/src/main.js）
|
||
|
||
```javaScript
|
||
// createApp(App).use(store).use(router).mount('#app')
|
||
const app = createApp(App)
|
||
app.use(store).use(router)
|
||
// 这里添加 deviceready 事件
|
||
document.addEventListener('deviceready',function(){
|
||
// 将挂载过程放入回调方法中
|
||
app.mount('#app')
|
||
},false)
|
||
|
||
|
||
```
|
||
|
||
# 打包测试
|
||
|
||
创建cordova工程
|
||
` cordova create myCordovaApp com.insper.cordova myCordovaApp `
|
||
|
||
在vue工程中执行打包命令
|
||
`npm run build`
|
||
|
||
执行此命令后，会将vue 工程打包后的 html、js、css 等文件 放入vue.config.js 文件中配置的指定位置，方便起见我们可以直接指定这个位置为 cordova 工程的 www 目录。
|
||
|
||
在cordova工程中执行编译打包命令
|
||
`cordova run android`
|
||
|
||
手机端安装成功后出现myCordovaApp启动出现 vue官方默认页面说明工程构建成功。
|
||
|