如何用vue-cli3搭建移动端h5项目

2,922 阅读1分钟

因为我电脑上用的是vue-cli2,所以要先将以前的老脚手架拆卸,重新下载最新版本的脚手架;

大体步骤如下:

  • 安装与初始化架构vue-cli3脚手架

安装

先查看电脑上node的版本 node -V

node>=8.9   (直接从node官网下载最新的版本安装)

安装:npm install -g @vue/cli         

(vue-cli3版本下载通过 @vue/cli ,如果安装了旧版本,建议先用  npm uninstall vue-cli -g 拆卸旧版本,重新下载,下载好后查看版本  vue --version)

创建一个项目

vue create dome-h5

接下来会要选择预设

默认选择babel和eslint,也可以自己手动设置选择


提示是否选用history模式,选yes

 之后类似可以按自己需要选择

同时你可以输入 vue ui

图形华界面创建项目流程(推荐)

我这里是基于vant-ui来搭建移动端H5单页面


引用vant组件

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
在main.js中引入组件

import { Button,Cell } from 'vant';

Vue.use(Button).use(Cell)

之后就可以在各个页面中使用van-button了