vue-cli3 创建的 vue2 手机网页端项目 从零到有---1（安装需要的依赖，公共样式，重置样式，手机端适配，打包，路由，ui组件，github连接仓库并推送）

使用vue-cli 创建项目的过程省略，下面是项目创建好之后的过程。
这里我把项目创建初始原本的东西不需要的页面和样式删除了。

1.安装第一个依赖（less less-loader)

这里再次复习一下

生产依赖：dependencies
应用依赖，或者叫做业务依赖，这是我们最常用的依赖包管理对象！它用于指定应用依赖的外部包，这些依赖是应用发布后正常执行时所需要的，但不包含测试时或者本地打包时所使用的包。

安装命令

npm install package-name --save
或
npm install package-name -S

开发依赖：devDependencies
开发环境依赖，仅次于dependencies的使用频率！它的对象定义和dependencies一样，只不过它里面的包只用于开发环境，不用于生产环境，这些包通常是单元测试或者打包工具等，例如gulp,
grunt, webpack, moca, coffee等
安装命令：
npm install package-name --save-dev
或
npm install package-name -D

安装代码：

npm install less less-loader --save

效果如下： less效果出来了，接下来我们要把公共样式和重置样式写好，公共样式可以自己写，重置样式可以网上找，网上很多。

2.公共样式和重置样式

从上图我们可以看到，有body自带的margin:8px，以及很多html标签有自带的样式，例如a标签，还有li 标签。所以这就是为什么要添加重置样式的原因。
这里我随便找一个重置样式：

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

这里我在assets里面新建了三个文件夹，如下图：img,js和css，分别存放相对应的文件，
在less文件夹内新建common.less和reset.less两个文件 ，
将上面的重置样式放置到reset.less内,保存后会同时生成一个reset.css ，
我们需要用的就是这个css文件，因为浏览器只认识css，
同理，common.css也是同样的方法，
最后我们在main.js导入，如下下图：
在main.js导入css代码：import “@/assets/css/reset.css”

效果如下：重置样式生效，代表成功。

下面介绍一下common.css的作用，相当于公共样式，只要自己用的多，用得久，就可以编写一整套样式，每次新建立项目都是用自己熟悉的类名代表样式去写。
例如图所示 .p10 就代表padding:10px;

使用及效果：
使用：

效果：

3.适配手机

这里我已经写过一篇了，请点击此链接查看
跟着步骤完成之后
使用：

效果：

如上图，字体大小设置的永远是16px,但是转换过来的rem是一直不变的，变的是html的font-size的大小，所以就成功达到适配的效果，在小手机上，字体就小些，大手机上，手机就大些。

这里将文件打包放环境上测试看看，能不能达到适配的效果，预防上线后出问题，

这里打包之后是这样，找不到引用的css和js，因为我们webpack没有配置打包的路径，打包相关的请点击此链接查看

配置后重新打包
配置

打包后

再放置到线上试试

打开后，成功！！！

4.路由

这里看到用vue-cli创建的项目自带了vue-router，就不用下载依赖了，直接使用即可。

在src下面新建一个文件夹，router文件夹，里面放置一个 index.js 来配置路由：如下图

示例代码如下图：

import Vue from "vue";
import VueRouter from "vue-router";
 
// 引入组件
// import Index from "@/components/Index"
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
 
const routes = [
    {
        path:"/",
        component: ()=>import('@/components/Index')
    },
    {
        path:"/home",
        component: ()=>import('@/views/home')
    }
]
 
var router =  new VueRouter({
    routes
})
export default router;

然后在main.js内导入并全局注册：如下图

使用及效果：
使用，app.vue内放置展示窗口，

Index.vue内点击跳转到home路由

成功！！！

5.组件库（vant)

跳转到组件请点击此链接

安装

#Vue 2 项目，安装 Vant 2.x 版本：
npm i vant -S

为了快速写项目 直接全部导入 main.js内
import Vue from ‘vue’;
import Vant from ‘vant’;
import ‘vant/lib/index.css’;
Vue.use(Vant);
使用及效果：

打包一下试试：一共1.78M

成功没问题！！！

6.最后，将项目push到github上面保存

之前有写 创建项目并且推送到GitHub上请点击此链接查看