vue2+vuex+vux+axios构建移动端单页面个人博客（1——环境搭建）

男娘i 2022-05-25 01:10 113阅读 0赞

熟话说无图无真相，懒人一个，图就不截了，直接上本次手记案例项目在线地址，[点击窝查看在线案例预览][Link 1]，大家可以预览一下（推荐使用chrom浏览器的手机模式）

说实话本人也是刚接触到vue不久，在慕课网上学了vue基础的两个视频教程，然后查的各大文档，捣鼓出来的一个个人博客例子，现在分享给大家，还望大神勿喷o(∩\_∩)o ~~~

本手记案例需要具有一定的javascript、es6、vue基础知识，熟悉vuex、vue-route，以及ui框架vux，现给出各大文档的在线地址：  
vue2:[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]  
vue-router2:[http://router.vuejs.org/zh-cn/index.html][http_router.vuejs.org_zh-cn_index.html]  
vuex:[https://vuex.vuejs.org/zh-cn/][https_vuex.vuejs.org_zh-cn]  
vux:[https://vux.li/][https_vux.li]\#/  
axios:[http://www.kancloud.cn/yunye/axios/234845][http_www.kancloud.cn_yunye_axios_234845]

本手记都在window7下运行

好啦，废话太多啦，如果具备一定基础后，不怂，直接开干~

首先安装node，现在稳定版本是6点几，用这个就行，千万别手贱给搞到7了，不然出现一些神奇的事情，可已把你折腾的精神奔溃，一般node版本在4.2——6点几就行了。安装node，网上直接下载，安装就OK了，然后在cmd黑窗口输入

node -v

查看node版本  
node安装之后会附带安装npm的，npm的版本尽量要在3点几以上，  
npm版本太低的，请在cmd黑窗口输入下面命令进行升级

npm update npm -g

然而一些网络环境比较蛋疼的童鞋，使用npm的时候，各种蛋疼的事情都会出现，这个时候你就该使用npm的淘宝镜像cnpm了  
环境不好的童鞋，请在cmd中输入下面命令安装cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

无论npm可以正常使用的还是不可使用的，都推荐把cnpm给安装上了，因为后面会用到

接下来，就是安装一系列命令啦  
全局安装vue-cli（PS:npm不可用者，直接把npm替换成cnpm即可）

npm install -g vue-cli

全局安装webpack

npm install -g webpack

使用vue-cli脚手架创建一个vue项目，请cmd进入你电脑的经常放代码磁盘，例如F盘  
然后运行命令，这里的my-project只是你创建的项目文件夹名称

vue init webpack my-project

这个命令有可能会出现一些对话，以及选项，这个时候别慌  
![图片描述][58f08d8f0001d90504390233.png]  
这是问你项目的名称，他默认是跟你起文件夹的名称一致，也就是vue init webpack my-project 中的my-project ，而我只是为了做演示，直接乱打的一个项目名hah，大家不必纠结，按回车默认即可，然后会出现  
![图片描述][58f08e3b0001099c04370238.png]  
意识是要你介绍这个项目是啥子，窝英文不太好，默认回车  
![图片描述][58f08e8a0001f81204380236.png]  
这个就是要你写作者啦，尽量写英文名称，  
![图片描述][58f08ecf00011b2906600232.png]  
这个一长串，直接回车，想要了解意思，直接百度翻译查去吧  
![图片描述][58f08f2c0001a01404430222.png]  
之后的一系列选择，除了vue-router选y，其他全部n  
成功之后，命令进入你的项目名  
![图片描述][58f08f950001c78e06470399.png]  
然后命令

npm install

这个时候他就在根据创建package.json文件，安装一系列依赖的包，这个地方我文字解释有些简单了，但你做多了自然而然就明白了  
如果出现一些安装失败的就使用cnpm吧

![图片描述][58f0916f0001f94506440414.png]  
安装好了之后，只要不是出现error就没多大的事情，我的这两个警告没影响的  
运行命令

npm run dev

![图片描述][58f091ec0001b26106130428.png]  
这个命令成功之后，他会启动你的默认浏览器打开这个项目，会出现vue的logo，出现这个  
![图片描述][58f092020001ab3816000826.png]

作者： woshiajuana   
链接：https://www.imooc.com/article/17518  
来源：慕课网  
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

[Link 1]: http://www.owulia.com/ajuan
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[http_router.vuejs.org_zh-cn_index.html]: http://router.vuejs.org/zh-cn/index.html
[https_vuex.vuejs.org_zh-cn]: https://vuex.vuejs.org/zh-cn/
[https_vux.li]: https://vux.li/
[http_www.kancloud.cn_yunye_axios_234845]: http://www.kancloud.cn/yunye/axios/234845
[58f08d8f0001d90504390233.png]: /images/20220525/70a9caa2f83b4194806e3e665d4567c3.png
[58f08e3b0001099c04370238.png]: /images/20220525/ac185554940540adb6eacebbd302f72d.png
[58f08e8a0001f81204380236.png]: /images/20220525/3bac34eb2c2c4d41b1d2211c4aab33f8.png
[58f08ecf00011b2906600232.png]: /images/20220525/474ce99eaaa24494b1ec25f8124d881e.png
[58f08f2c0001a01404430222.png]: /images/20220525/716a811c53204ec1ab5edbc1626f4bb2.png
[58f08f950001c78e06470399.png]: /images/20220525/6b4558213b7b45398a865c38565bff88.png
[58f0916f0001f94506440414.png]: /images/20220525/785898eb41e24a69bede3dad583f943b.png
[58f091ec0001b26106130428.png]: /images/20220525/535720a283d142ff9d09c5f8f0f74cde.png
[58f092020001ab3816000826.png]: /images/20220525/ecb374d42f274012b7446b8444dfc4bd.png