从零搭建VUE-CLI移动端项目

vue + vant +echarts +vuex +vue-router +vw 适配 +fastclick 处理300毫秒延迟 + 移动端真机测试

后话：我发现，加了fastclick处理300ms延迟后，在苹果手机上点击输入款聚焦会很困难，不灵敏，然后，，，我就把300ms延迟这个去掉了。。。。。。哎，菜鸡如我

慌慌：这文章就是我自己没事写来方便自己看的，有人赞我很慌，我很菜的，仅供参考，大佬不要喷我。

前提条件：

1、安装了node.js ,安装了淘宝镜像（如果没安淘宝镜像把cnpm换成npm）
如果没有安装过vue-cli
cnpm install -g vue-cli
如果已经安装过vue-cli直接初始化项目
vue init webpack myproject （myproject是文件名）
一路回车

(最好在ESLint那里选择no，不然后面语法稍微不规范就报错，比如只允许单引号，不能有分号，空行不得超过两行等)

image.png

除了红框里的选no，其他直接enter，
我有下载淘宝镜像，所以我选择自己处理，首先进入到myproject文件夹cd myproject
下载模块cnpm install

image.png

下载完成后， npm run dev浏览器输入localhost:8080就可以看到页面了

image.png
接下来继续安装我们需要用到的模块

首先是vuex

cnpm install vuex --save

新建store文件

image.png

新建store.js

image.png
store.js内存储改变公共状态的键值对及方法
image.png

在main.js内引入

image.png
运用：
this.$store.state.userid 可访问到公共状态

报错啦(最好在一开始ESLint那里选择no，不然后面语法稍微不规范就报错，比如只允许单引号，不能有分号，空行不得超过两行等)

image.png

原因：不符合Eslint代码规范
解决：在不规范的那个文件里 /* eslint-disable */ 这样的一句代码，如图：

image.png

接下来是请求，下载axios模块

cnpm install axios --save
cnpm install underscore--save
main.js中：

image.png

app.vue中：

image.png

UI框架

cnpm install vant --save
全局引入，在main.js中

image.png

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

移动端300ms延迟问题

cnpm install fastclick --save
main.js中：

import fastClick from 'fastclick'
fastClick.attach(document.body)

适配方案vw

cnpm install postcss-px-to-viewport --save
找到文件.postcssrc.js,修改文件：

image.png
参考文章链接：
https://www.jianshu.com/p/1f1b23f8348f
https://zhuanlan.zhihu.com/p/134289924

echarts引入

cnpm install echarts --save

在需要使用的组件内引入

import echarts from "echarts";
import 'chart' from "../../components/chartline";

组件使用

<div class="echarts"  v-if="display_data.zxl!=''">
     <chart
       v-if="display_data.zxl!=''"
       :xline="display_data.time"
       :yline1="display_data.zxl"
       :yline2="display_data.djl"
     />
</div>

CSS相关 配置less

cnpm install less less-loader --save-dev

image.png
image.png