Vue项目的创建、安装、前端框架的引入详解

前言:

为了避免每次在Vue项目中写好并编译完页面之后每次都拷贝到Cordova项目的www文件夹，我们直接Cordova项目的根目录创建一个叫MyApp的文件夹存放Vue项目，然后再对Vue项目进行一些配置使其自动将编译好的文件输出到www文件夹。

---

1.安装Vue

（已安装则忽略）

npm install -g vue

2.安装vue-cli脚手架(帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等)

（已安装则忽略）

npm install -g @vue-cli

3.创建Vue项目

在Cordova项目根目录执行：

vue init webpack MyApp

1. 修改配置文件--修改Vue项目config/index.js文件

2.编译并启动项目

在Vue项目根目录执行：

npm run build && npm run dev

即可编译vue项目自动到cordova主目录下的www文件夹中。

3.使用cordova真机调试

完成以上内容，即可利用Cordova进行编译打包APK进行真机调试了，使用到如下命令：

1. cordova build
2. cordova run android

或者两个命令合并为一个：

cordova build && cordova run android

4.技巧

自动编译Vue项目以及自动编译cordova项目并真机调试，设置如下：

在MyApp项目的package.json中如下设置：

这样在Cordoba项目中的任意目录下执行：

npm run device

即可。

5.在Vue项目增加前端UI框架

以增加Vant前端UI框架为例（在MyApp文件夹中执行）：

npm i vant -S

 

配置Vant自动按需引入组件

安装插件

npm i babel-plugin-import -D(导入此插件,可实现按需导入)

在.babelrc 中添加配置

// 注意：webpack 1 无需设置 libraryDirectory

{

  "plugins": [

    ["import", {

      "libraryName": "vant",

      "libraryDirectory": "es",

      "style": true

    }]

  ]

}

接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入形式

import { Button } from 'vant';

相当于：

import Button from 'vant/lib/button';

import 'vant/lib/button/style';