vue项目搭建经验分享

新的工作需要从头开始搭建项目
而且前端只有我一个人
迫于无奈开始自己踩坑的过程
到现在也算是小有成就
一下分享为纯小白进阶版教程和经验整理,大神们如果看到的话请一定要提出意见,谢谢

此教程基于 vue-cli & webpack 一键构建过程遇到的各种坑和相关解决办法

1. 安装基础环境

这个就不用说了吧,自己动手安装node环境,git,自己安装webstorm
为啥要用webstorm
因为我想用(……)
开玩笑啦
因为最近用起来发现,webstorm可以一键修改文件路径!!!意思是你修改一个文件的名字的时候,他会自动给你的整个项目进行重构!!!棒不棒!!!这对于我这种小白来说真的是太棒了!!!
当然它的优点不止这些啦,反正我用了以后开始抛弃VSCode,唯一的缺点可能就是它要钱吧……但是我们公司是给买的啦,不能买的可以参考**方案 http://idea.lanyus.com/
当然你不想用也是可以的啦~~~

2. 配置镜像地址

这步是重点了!!!
曾经的曾经我以为,只要把npm默认下载路径改成淘宝镜像路径就ok了

顺便一提为啥要直接修改路径而不是用cnpm呢
原因是,我发现webpack在使用命令行的时候,用cnpm会有不定时几率的构建失败
我是容忍不了这个的啦,我一看到构建失败,血压直接上升!!!
就生气!!!
为了让自己活得久一点
我决定从根源解决它
就是直接修改默认下载路径啦~~~~
修改方法在这里 https://blog.csdn.net/chenhaifeng2016/article/details/64128095

全局安装,vue webpack vue-cli
怎么安装请去看文档好吗

重点来了!!!!
如果你,想后期使用前端自动化测试的功能
请看接下来的血的教训!!!!
你要是不想用
也建议你看啦
反正我感觉这一步就算操作了,后期你不用,也没啥坏处???
再说了万一你后面就想用了呢~~~
然后我后面就遇到了,不可逆转的坑
以下为重点

修改 chromedriver 安装路径
因为这个东西安装不成功,那么执行 cli 的时候就会报错
那么目录就不健全,这个后期你再修改我是没找到解决办法
只能一开始就解决

解决方法就是命令行执行

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

详细解决办法:https://segmentfault.com/a/1190000013289136

3.开始项目搭建

接下来就是激动人心的时候
在编辑器中,打开你的项目目录
命令行执行 vue init webpack + 项目名称
例:

vue init webpack test

vue项目搭建经验分享

中间会需要填项目名称和作者,你就自己填好吧
vue项目搭建经验分享
这里直接回车,它在问你是安装cli的所有东西呢,还是安基础功能以后你自己再添加呢
我建议你直接回车
你说说你这后期短东西了,还得再查东查西
不如现在就自觉一点
全安上好吧
vue项目搭建经验分享

然后问你要不要安装router啊,eslint啊,代码风格要啥啊,你就一路y就ok了
代码风格我也是直接选的第一个Standard
我是这样理解的
先不说这几个选项哪个好
但是它既然是默认选项
就肯定有它的道理对吧
vue项目搭建经验分享

顺便推荐一个截图软件,贼拉好用,可以直接截图直接贴图在当前屏幕
https://www.snipaste.com/

然后他会问你要不要安装test,这个就是测试插件啦,刚刚咱们安装的chromedriver 派上了用场!!!!如果刚刚严格按照我的谆谆教诲来走,这个时候你会发现,它!!不!!会!!报!!错!!
否则他会给你讲它找不到chromedriver 让你自己装!!!
你这自己咋装!!
那多麻烦啊!!!

vue项目搭建经验分享

然后你就一路回车,就开始装啦

装好以后你的目录长介样
vue项目搭建经验分享

首先说说大家都是干啥的

  • build是一些webpack的配置文件,
  • config是开发配置文件
  • node_modules是依赖包
  • src源文件
  • test就是测试插件配置文件

哎好多啊
懒得写了
我贴个图你们自己看吧好吧
vue项目搭建经验分享
其中src文件夹下的一些文件夹是我给自己项目设置的目录
还有static我修改了一下
我感觉这样会方便一些
我感觉还是可以的啦,自我感觉很棒棒

然后其中src/下有个store文件夹
这个里面是vuex的一些相关配置

vuex是一个,状态管理插件
我的理解就是,把整个项目最经常会用到的变量,用这个来统一管理
具体安装办法和使用说明请看

https://segmentfault.com/a/1190000015782272

然后到现在项目就算搭建完成啦~~~

剩下的就是一些小零碎了

值得一提的是我最近在搞自动化测试

但是发现国内这个文档好少啊……英文文档又看不懂

准备好好磕一下,然后分享给大家

拜拜~~~

发现碰到问题一定不要着急

总会找到解决的办法哒~~~

加油~~~~