Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现
![5640239-7591e503272c8a47.png](https://upload-images.jianshu.io/upload_images/5640239-7591e503272c8a47.png)
npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像
![5640239-ddd27b002cf164b9.png](https://upload-images.jianshu.io/upload_images/5640239-ddd27b002cf164b9.png)
1:
![5640239-d0a060f99504fb7d.png](https://upload-images.jianshu.io/upload_images/5640239-d0a060f99504fb7d.png)
2:安装cnpm -v
![5640239-87532cbf72ac66d6.png](https://upload-images.jianshu.io/upload_images/5640239-87532cbf72ac66d6.png)
vue没有被找到
3:
![5640239-9733f64e8895c3b5.png](https://upload-images.jianshu.io/upload_images/5640239-9733f64e8895c3b5.png)
4:再次输入Vue的时候,我们会看到
![5640239-817acc1cdffbf385.png](https://upload-images.jianshu.io/upload_images/5640239-817acc1cdffbf385.png)
接下来如何使用命令行工具?看官网
![5640239-353f213f3c9ea799.png](https://upload-images.jianshu.io/upload_images/5640239-353f213f3c9ea799.png)
1: 我们在当前目录下生成一个
![5640239-b2ba4c87884e6260.png](https://upload-images.jianshu.io/upload_images/5640239-b2ba4c87884e6260.png)
以下信息可选填
![5640239-472c3d50aa8a963b.png](https://upload-images.jianshu.io/upload_images/5640239-472c3d50aa8a963b.png)
2:项目初始化完成,我们发现目录下多了一项文件夹,大概长这个样子
![5640239-e720a7c8384ed832.png](https://upload-images.jianshu.io/upload_images/5640239-e720a7c8384ed832.png)
![5640239-bac555c0be8bae16.png](https://upload-images.jianshu.io/upload_images/5640239-bac555c0be8bae16.png)
不能直接看项目,项目不是独立存在 ,跟其他的库是有千丝万缕的联系的,所以要下载依赖包,可以直接在根目录下查看和安装,我们看一下
![5640239-e159f1a1fe1b4f5c.png](https://upload-images.jianshu.io/upload_images/5640239-e159f1a1fe1b4f5c.png)
查看到信息和这套模板里面带的一些依赖
![5640239-919095fd8496640f.png](https://upload-images.jianshu.io/upload_images/5640239-919095fd8496640f.png)
这不是重要的,重要的是,cnpm install 这个命令,把所有的依赖都安装到当前的目录下
![5640239-46ac26c425d68afa.png](https://upload-images.jianshu.io/upload_images/5640239-46ac26c425d68afa.png)
接下来使用命令行启动服务器 npm run dev
![5640239-2dbc0ed5f89bd577.png](https://upload-images.jianshu.io/upload_images/5640239-2dbc0ed5f89bd577.png)
监听的端口是8080
![5640239-f47dcf4dd4960402.png](https://upload-images.jianshu.io/upload_images/5640239-f47dcf4dd4960402.png)
搭建成功,在src文件夹底下进行剩下的开发
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步