从零开始搭建vue2+vant2项目

前言：最近发现一个比较不错的移动端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>

页面效果：