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中间会需要填项目名称和作者，你就自己填好吧
这里直接回车，它在问你是安装cli的所有东西呢，还是安基础功能以后你自己再添加呢
我建议你直接回车
你说说你这后期短东西了，还得再查东查西
不如现在就自觉一点
全安上好吧
然后问你要不要安装router啊，eslint啊，代码风格要啥啊，你就一路y就ok了
代码风格我也是直接选的第一个Standard
我是这样理解的
先不说这几个选项哪个好
但是它既然是默认选项
就肯定有它的道理对吧
顺便推荐一个截图软件，贼拉好用，可以直接截图直接贴图在当前屏幕
https://www.snipaste.com/
然后他会问你要不要安装test，这个就是测试插件啦，刚刚咱们安装的chromedriver 派上了用场！！！！如果刚刚严格按照我的谆谆教诲来走，这个时候你会发现，它！！不！！会！！报！！错！！
否则他会给你讲它找不到chromedriver 让你自己装！！！
你这自己咋装！！
那多麻烦啊！！！
然后你就一路回车，就开始装啦
装好以后你的目录长介样
首先说说大家都是干啥的
- build是一些webpack的配置文件，
- config是开发配置文件
- node_modules是依赖包
- src源文件
- test就是测试插件配置文件
哎好多啊
懒得写了
我贴个图你们自己看吧好吧
其中src文件夹下的一些文件夹是我给自己项目设置的目录
还有static我修改了一下
我感觉这样会方便一些
我感觉还是可以的啦，自我感觉很棒棒
然后其中src/下有个store文件夹
这个里面是vuex的一些相关配置
vuex是一个，状态管理插件
我的理解就是，把整个项目最经常会用到的变量，用这个来统一管理
具体安装办法和使用说明请看
https://segmentfault.com/a/1190000015782272
然后到现在项目就算搭建完成啦~~~
剩下的就是一些小零碎了
值得一提的是我最近在搞自动化测试
但是发现国内这个文档好少啊……英文文档又看不懂
准备好好磕一下，然后分享给大家
拜拜~~~
发现碰到问题一定不要着急
总会找到解决的办法哒~~~
加油~~~~
以上是 vue项目搭建经验分享 的全部内容， 来源链接： utcz.com/z/375586.html
