1.npm -v
2.vue -V
3.npm install -g vue-cli 首先全局安装vue-cli
4.npm install -g vue-cli --registry=https://registry.npm.taobao.org 安装淘宝镜像,比较快
5.vue init webpack h5master 然后,利用vue-cli构建一个vue项目,并安装项目依赖
6.cd h5master cd进项目目录里
7.npm install 安装依赖
8.项目中使用了sass vue-router vuex querystring等库,先安装相关依赖包
//npm install sass-loader vuex style-loader node-sass moment css-loader axios file-loader querystring vue-router --save-dev(这里可以按需安装,如下)
npm install less --save-dev 安装less 容易处理css
7.移动端使用的前端样式框架 vant 参看官网:https://youzan.github.io/vant/#/zh-CN/form
npm i vant -S
8.按照官方按需导入
babel-plugin-import是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
8.1安装插件
npm i babel-plugin-import -D
8.2配置插件
在.babelrc 或 babel.config.js 中添加配置:
{
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
8.3引入组件
所以我们在 src/components 下新建 vant.js ,写入:
import Vue from 'vue'
import { Button } from 'vant';
Vue.use(Button);
在main.js中引用
import '@/components/vant.js'
8.4 端口配置
有时候我们会开启多个服务器进行模拟,为了解决冲突,有时候我们需要更改8080端口,我们可以在根目录下新建 vue.config.js 中:
module.exports = {
devServer: {
port: 5000
}
}
8.npm run dev 启动项目