项目搭建

1、使用脚手架项目搭建

vue create hm-project

2、下载其他依赖

vant：Vant 3 - Mobile UI Components built on Vue

less：Less 中文网

axios：axios中文网|axios API 中文文档 | axios

//vant 移动端 Vue 组件库
npm i vant //Less CSS 预处理语言
npm i less less-loader@5.0.0 -D //axios 基于 promise 的 HTTP 库
npm i axios

3、配置vant组件库按需引入

3-1、下载依赖包

npm i babel-plugin-import -D

3-2、配置自动按需引入( babel.config.js中进行配置 )

module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};

4、删除脚手架项目的欢迎界面等项目无关的文件

1、assets/所有文件
2、components/所有文件
3、views/所有文件
4、App.vue中的代码（注意：需保留template标签，以及template里面根标签）

5、关闭eslint语法检测（非必要）

在项目根目录下创建vue.config.js文件

module.exports = {lintOnSave: false
}

注意：配置完成后，需要重启服务器，也就是需要重新执行npm run serve我们的配置才生效。

6、全局引入重置样式文件(reset.less)

main.js

import "./style/reset.less"

reset.less 样式代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

配置登录组件的路由

 

2-1、下载路由

npm i vue-router

 

 2-2、配置路由

单独创建一个文件进行配置

• 创建src/router/index.js文件（目的：方便后期维护）

• 在index.js中进行如下配置

  // 配置路由 
  import Vue from "vue"
  // 1、引入路由对象
  import VueRouter from "vue-router"
  // 2、使用Vue.use注册相关组件等
  Vue.use(VueRouter)
  // 3、创建路由规则
  const routes = [{path: "/login",// @是src这个目录的别名component: ()=>import("@/views/login.vue") // 按需引入}
  ]
  // 4、使用路由规则生成路由对象
  const router = new VueRouter({// routes: routes, 简写如下routes
  })
  // 5、导出路由对象
  export default router

• 在main.js中引入，并注入到new Vue实例中

  import router from "./router"
  ​
  // 6、将路由对象注入到new vue实例中
  new Vue({router,render: h => h(App),
  }).$mount('#app')

• 在App.vue中设置路由页面的挂载点

  <template><div><!-- 设置挂载点 --><router-view></router-view></div>
  </template>

  ​