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';

发布了78 篇原创文章 · 获赞 44 · 访问量 6万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览