用vue做好的项目打包成app

将Vue项目打包成app可以让用户更方便地访问和使用。在Vue项目中，我们可以使用Cordova或Electron来打包app。本文将介绍如何使用这两种工具将Vue项目打包成app。

Cordova打包Vue项目为App

Cordova是一个跨平台的开源框架，它允许开发人员使用HTML，CSS和JavaScript等web技术开发跨平台的移动应用程序。下面是将Vue项目打包成Cordova应用程序的步骤：

1. 安装Cordova：使用npm安装Cordova-cli工具。

```

npm install -g cordova

```

2. 创建Cordova项目：进入Vue项目的目录下，执行以下命令创建Cordova项目。

```

cordova create

```

3. 添加平台：Cordova可以将应用程序打包成不同的平台，例如Android和iOS。使用以下命令添加平台：

```

cordova platform add android

```

或

```

cordova platform add ios

```

4. 复制Vue项目：复制项目中的/dist目录下的文件到Cordova项目的www目录下。

5. 修改Cordova配置文件：打开Cordova项目的config.xml文件，并添加以下代码。

```

```

6. 构建应用程序：使用以下命令构建应用程序。

```

cordova build android

```

或

```

cordova build ios

```

构建完成后，应用程序将位于Cordova项目的/platforms/android/app/build/outputs/apk/debug目录下。

Electron打包Vue项目为桌面应用程序

Electron是一个基于Chromium和Node.js的应用程序框架，可以使用Web技术开发桌面应用程序。下面是将Vue项目打包成Electron桌面应用程序的步骤：

1. 安装Electron：使用npm安装Electron。

```

npm install electron --save-dev

```

2. 创建Electron项目：创建一个新的文件夹，并在其中创建一个文件名为main.js的文件。在该文件中，添加以下代码。

```

const {app, BrowserWindow} = require('electron')

const path = require('path')

function createWindow () {

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

preload: path.join(__dirname, 'preload.js'),

nodeIntegration: true

}

})

win.loadFile('path/to/index.html')

}

app.whenReady().then(() => {

createWindow()

})

```

3. 复制Vue项目：复制项目中的/dist目录下的文件到Electron项目的path/to目录下。

4. 安装依赖：使用以下命令安装依赖。

```

npm install

```

5. 运行应用程序：使用以下命令运行应用程序。

```

npm start

```

Electron将在桌面上运行Vue应用程序。

总结

以上是使用Cordova和Electron将Vue项目打包成App的步骤。这些工具能够让我们在Vue应用程序的基础上快速地创建一些跨平台应用程序。在制作时，我们可以根据需要选择适合自己的框架。