VUE项目学习（一）：搭建VUE前端项目

╰半夏微凉° 2022-12-31 11:28 170阅读 0赞

## VUE项目学习（一）：搭建VUE前端项目 ##

### 1、安装node.js环境 ###

（1）下载node.js，下载地址为：[https://nodejs.org/en/][https_nodejs.org_en]  
（2）按照默认选项安装node，检查安装版本  
![在这里插入图片描述][20201229163425573.png]  
（3）配置下载镜像，镜像地址为：[http://npm.taobao.org/][http_npm.taobao.org]，安装成功后，可以直接使用cnpm代替npm命令

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

检查cnpm是否安装成功  
![在这里插入图片描述][20201229164336671.png]

### 2、搭建vue项目 ###

（1）全局安装VUE脚手架vue-cli，执行命令为：

npm install --global vue-cli

安装成功的界面为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
（2）选择项目目录，创建一个基于 webpack 模板的新VUE项目，项目下载命令为：

vue init webpack demo

在项目配置界面，可以参考下图说明：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]  
项目下载成功后如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]  
（3）启动项目，进入项目所在根目录，运行项目启动命令：

npm run dev

项目启动成功后，界面如下图：  
![在这里插入图片描述][20201229170830701.png]  
在浏览器地址栏输入：[http://localhost:8080][http_localhost_8080]，出现下图界面，说明初始项目搭建成功，可以进行个性化前端开发了！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]

[https_nodejs.org_en]: https://nodejs.org/en/
[20201229163425573.png]: /images/20221120/62b0cd8d680e480c834511cddfb10e08.png
[http_npm.taobao.org]: http://npm.taobao.org/
[20201229164336671.png]: /images/20221120/c69a1851a4614c379dba4355cbcb5503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201229165108244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201229170415360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201229170520465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[20201229170830701.png]: https://img-blog.csdnimg.cn/20201229170830701.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201229171028720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70