如何新建一个vue项目（图文详解）

忘是亡心i 2021-11-05 23:54 519阅读 0赞

定好目标，首先应该想到的就是安装环境，搭建框架，一步一步的完成最基础的新建一个Vue项目的目的。

##### 第一步npm安装 #####

步骤：

1.  到[node 官网][node] 选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]
2.  输入node -v，如果出现版本信息即表示安装成功。  
    ![在这里插入图片描述][20190809141106677.png]

##### 第二步：使用淘宝NPM 镜像 #####

1.  输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖。
2.  安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可。

##### 第三步：使用vue-cli创建项目 #####

1.  选定路径，新建vue项目，这里我是新建到桌面上新建vue项目文件夹里。然后到该文件夹下进入cmd控制台  
    ![在这里插入图片描述][2019080916501544.png]  
    2.使用脚手架安装项目： vue init webpack +项目名称 ，项目是基于webpack的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][20190809165154668.png]

##### 第四步：启动项目 #####

1.  进入项目目录：cd demo,(这里我是用webStorm打开的项目)
2.  安装项目所需要的依赖：npm install （如果用webStorm打开的话就需要一下界面显示操作）  
    ![在这里插入图片描述][20190809165221516.png]
3.  启动项目：npm run dev  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]  
    启动成功，浏览器打开：localhost:8080，即可看到vue项目。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]  
    最后查看项目vue的目录结构  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]  
    现在公众号迁移到这个啦， 不要迷路了，慕仔们，加油哦！  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]  
    接下来的一段时间，我会专注Java技术栈，计算机网络，数据结构和算法，操作系统，设计模式，计算机组成原理，数据库原理，设计模式来做分享，欢迎你们和我一起学习，一起提高，Fighting!

本文转载自：https://blog.csdn.net/dt1991524/article/details/83385327

[node]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20211104/f3efbe3daa1d4e5c920db23a6c23c2e9.png
[20190809141106677.png]: /images/20211104/446082ae71c6488b88a47084c666b8a5.png
[2019080916501544.png]: /images/20211104/326fa60f09084274b597727ce5663955.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20211104/ec488baa1fee4488885d977c2a680316.png
[20190809165154668.png]: /images/20211104/f16680949c3f48e9b2f64b3d12a98100.png
[20190809165221516.png]: /images/20211104/5e8337d866c94b44926adda75960c7c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20211104/b493c9f1529c43a59875cf77cad21066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: /images/20211104/c07737aa6a5544d28f9e4db0114bb544.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]: /images/20211104/8ecaf2e0ce914d9d82d3d0097e55c3d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]: /images/20211104/2531db6596794d9cb3bfc9f7c482b324.png