转载搭建VUE框架

忘是亡心i 2022-02-02 04:19 255阅读 0赞

自行记录搭建VUE框架

链接：[https://www.cnblogs.com/winter92/p/7117057.html][https_www.cnblogs.com_winter92_p_7117057.html]

搭建vue开发环境的步骤  
相信很多人在刚开始学习vue这个框架的时候，在最开始搭建开发环境的时候，都会遇到一些大大小小的坑，我之前在学习angular的时候搭建过一次，过了一个月后在搭建第二次的时候，竟然有一些混乱，所以今天想整理出来；

vue现在在前端，相对于算是现在前端工程师都比较常用的框架之一，他和angular有一些相似之处，所以用过angular的伙伴们，再来学习vue应该不会感觉太难；

一：在搭建vue的开发环境之前，一定一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，网址：[http://nodejs.cn][http_nodejs.cn]；![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2Mzg4MA_size_16_color_FFFFFF_t_70]

二：下载好node之后，打开docs管理工具，先看看node安装成功了没有，输入 node -v ，回车，会输出node的版本号，

这样就已经是安装成功了，由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用

淘宝的cnpm命令管理工具可以代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；

三：淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2Mzg4MA_size_16_color_FFFFFF_t_70 1]

四：搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，精良不要装在C盘，因为vue下载下来的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘，

然后我们开始创建新的项目输入命令：vue init webpack my-project 回车，my-project是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-route，

这个我们在项目要用到，所以就输入y 回车

![在这里插入图片描述][2019051016385916.png]

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2Mzg4MA_size_16_color_FFFFFF_t_70 2]

四：文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project 回车，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，

输入命令：cnpm install

![在这里插入图片描述][2019051016395286.png]

五：已经安装好之后，现在要来测试一下我们下载好的模板能不能正常的运行，在命令行输入：cnpm run dev 回车即可，

![在这里插入图片描述][20190510164026444.png]

[https_www.cnblogs.com_winter92_p_7117057.html]: https://www.cnblogs.com/winter92/p/7117057.html
[http_nodejs.cn]: http://nodejs.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2Mzg4MA_size_16_color_FFFFFF_t_70]: /images/20220202/2aa07b89398949368314b2e96007779c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2Mzg4MA_size_16_color_FFFFFF_t_70 1]: /images/20220202/d484b4f3c77749ba9b0a8cd3a0b4e4a8.png
[2019051016385916.png]: /images/20220202/e33fdd617b70408da368260bb6e059d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU2Mzg4MA_size_16_color_FFFFFF_t_70 2]: /images/20220202/32e3fc04ad3549b68058cacc5e61fb1a.png
[2019051016395286.png]: /images/20220202/546dfbb97fbe4f5cb10b8bbf9822f38d.png
[20190510164026444.png]: /images/20220202/b6302c889b844b40873a1136aa77965b.png