前言：最近发现一个比较不错的移动端UI组件库vant2，打算搭建一个项目来学习一下，以防忘记，记录一下搭建过程。

1. 使用npm创建项目

执行 “vue create 项目名” 命令，选择vue2项目。

生成文件夹内容如下：

启动项目后进入如下页面：

2. 配置路由

在项目目录下执行以下命令，安装vue-router：

npm i vue-router@3.5.3 -D

在src目录下新建页面文件夹pages，然后在pages文件夹下新建页面index.vue。

在src目录下新建文件夹router，然后在router文件夹下新建 index.js，编辑内容如下：

import Vue from "vue"
import Router from "vue-router"Vue.use(Router)
export default new Router({mode:"hash",base:process.env.BASE_URL,routes:[{path:'/',name:'Index',component :()=> import('@/pages/index.vue'),meta:{title:'首页'}}]
})

在main.js下引入路由：

最后在App.vue页面上加上 <router-view></router-view>：

以上改完之后保存，发现如下报错：error Component name "index" should always be multi-word vue/multi-word-component-names

查了一下，发现原因是 eslint-plugin-vue 版本更新了，相较之前版本新增了不少规则，第一条就是 'vue/multi-word-component-names': 'error', 要求组件名称以驼峰格式命名，所以 index.vue 会报错。

报错解决方案：

按照规则，使用驼峰命名，例如 indexPage.vue

在vue.config.js文件里面加上一句：lintOnSave:false

注意：以上方案修改完成后需要重启项目（退出并重新运行npm run serve）才能生效，若不重启则依旧报错。

重启项目之后可以在浏览器看到如下页面。

3. 引入VantUI

在项目目录下执行以下命令安装Vant2。

npm i vant@latest-v2 -D

在main.js下全局引入Vant

报如下错Module not found: Error: Can't resolve 'vue-router' in 'E:\zhoushuizhang\xxx\test-demo\my-vant2\src\router'：

原因及解决方案：发现是之前安装路由及vant的时候不是在项目目录下安装的，导致删除之后出现这种报错，在项目目录下重新运行安装路由命令安装一下路由，再重新启动项目就可以了。

4.安装sass并配置全局变量

执行以下命令：

npm i sass-loader@8.x -D
npm i node-sass@4.14.1 -D

1、新建文件 variables.scss

$primary-color:#6992dd;
$secondary-color:#547fcd;
$text-blue-color:#648eda;
$highlight-color:#7cffe2;
$bgblue-color:#f2f7ff;

2、在vue.config.js文件下添加以下代码，就可以在页面中全局使用sass变量了：

css: {loaderOptions: {sass:{prependData:'@import "@/assets/style/variables.scss";'}}
},

3、在页面中使用sass变量：

<template><div class="header">shouye</div>
</template>
<script>export default {data() {return{}}}
</script><style lang="scss">.header{height: 80px;color: #000;background-color: $primary-color;}
</style>

页面效果：

从零开始搭建vue2+vant2项目相关推荐

从零开始搭建Vue2.0项目(二)之集成axios
文章目录
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
从零开始搭建一个react项目
Nav logo 120 发现关注消息 4 搜索从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
自己动手，使用Spring Initializr从零开始搭建Spring Cloud项目
新建Project 这里使用的开发工具是IDEA,JDK版本1.8. 打开IDEA开发工具,File -> New -> Project 然后一步步往下设置,然后到这一步,选择Spring ...
从零开始搭建一个springCloud项目
前言:springCloud,相信大家已经听过很多次了,现在各种大大小小的公司都在使用的微服务框架,包括我正在上班公司的项目里面使用到的就是springCloud,此文仅对于刚入行不久的小白,大佬们可 ...
从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建
文章目录前言一.全局安装vue-cli 二.创建vue项目 1.用命令来创建vue项目三.运行项目 1.项目目录解读一.项目全局引入element ui 总结写文初衷前言在开始之前,首先 ...
从零开始搭建React开发项目之抖音“剪映”——创作课堂（基础入门篇）
前言 React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高,对于很多新手来说可能很多人都在犹豫是选react还是vue,如果时间充裕的话还是首选r ...
github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
umi脚手架搭建的项目_还在从零开始搭建项目？手撸了款快速开发脚手架！
之前开源了一款项目骨架mall-tiny,完整继承了mall项目的整个技术栈.总感觉mall-tiny集成了太多中间件,过于复杂了.这次对其进行了简化和升级,使它成为了一款拥有完整权限管理功能的快速开 ...

从零开始搭建vue2+vant2项目

1. 使用npm创建项目

2. 配置路由

3. 引入VantUI

4.安装sass并配置全局变量

从零开始搭建vue2+vant2项目相关推荐

最新文章

热门文章