obsidian_note/各种项目/光交锁/创建Cordova中可用的Vue项目.md

# 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官方默认页面说明工程构建成功。