因为我电脑上用的是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了