vue项目中搭建脚手架

朴灿烈づ我的快乐病毒、 2022-02-13 09:59 313阅读 0赞

一、安装  
1.安装**nodejs**（自带npm）  
2.安装cnpm  
命令窗口:**npm install -g cnpm** \--registry=https://registry.npm.taobao.org;  
3.全局安装**webpack**  
命令窗口:**npm install webpack –g**;  
4.安装vue-cli脚手架构建工具  
命令窗口:**npm install vue-cli –g**;

--------------------

二、使用vue-cli构建项目  
1.准备一个文件夹作为你的工作空间（以后的每个项目都在文件夹下）如：e:\\workspace  
2. 安装vue脚手架  
在工作空间的目录下运行 vue init webpack 项目名称  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]

3.安装项目依赖  
命令窗口：npm install;  
4.安装 vue 路由模块 **vue-router** 和网络请求模块 **vue-resource**;  
命令窗口：**npm install vue-router vue-resource --sav**e；  
5.vue脚手架构建的项目目录结构

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

三、启动项目测试安装是否成功  
命令窗口：**npm run dev**;  
看到如下画面说明安装成功，默认端口号是8080  
![在这里插入图片描述][20190427172632180.png]  
四、运行  
在地址栏中输入http://localhost:8080/\#  
看到下图,说明成功了，恭喜您，亲！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]: /images/20220213/6b9d1fe7517d437bbe9a52d297a84eec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 1]: /images/20220213/62406811c19049b691922b4dd1aa5b2c.png
[20190427172632180.png]: /images/20220213/d1e95e61c17742e5a0ce8dc3e9724491.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 2]: /images/20220213/95d9a1cae2dd4379a8584ae3edc8ed23.png