如何用Vue创建或者打开一个已有的项目

已于 2022-02-07 22:48:16 修改
阅读量1.3w 收藏 67
点赞数 13
分类专栏： # Vue 文章标签： vue
于 2021-08-24 13:45:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyw2002/article/details/119887019
版权
本文详述了如何一步步配置Node.js环境、安装cnpm、vue-cli，并创建及运行Vue项目。从下载Node.js到安装vue-cli，再到使用cnpm安装依赖和运行项目，每个步骤都有清晰说明。此外，还介绍了如何处理安装过程中可能遇到的问题，以及如何运行已有的Vue开源项目，包括安装webpack和相关依赖。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


本篇文章介绍了如何用Vue创建或者打开一个已有的项目。
其中目录中的1-3是必须完成的步骤。在此基础上，如果需要创建新的项目，需要完成步骤4；如果需要打开现有的项目，需要完成步骤5。

1. 安装node.js

1.1 从官网下载node

node官网下载地址
在这里插入图片描述
选择合适的版本（无特殊要求，我选择的是左边的稳定版），一路“下一步”即可完成安装（可以选择安装路径，但要注意记录下安装的路径，后续配置环境变量时需要，此处我的默认路径是“C:\Program Files\nodejs”）。

2022年2月更：如果还想要14.17.5版的，去下面这个链接
https://nodejs.org/download/release/v14.17.5/
选择后缀为msi的安装程序下载
在这里插入图片描述

1.2 配置环境变量

  1. 用户变量
    在用户变量窗口点击“新建”，然后在弹窗中输入下列信息，点击“确定”即可。
    变量名：NODE_PATH
    变量值：C:\Program Files\nodejs\node_modules\
    在这里插入图片描述

  2. 系统变量
    在系统变量中找到Path并点击, 然后在弹窗中点击“新建”， 并分别键入
    C:\Program Files\nodejs\
    C:\Program Files\nodejs\node_global\
    最后点击“确定”即可
    在这里插入图片描述

1.3 检查是否安装成功以及版本信息

  1. 在命令行键入node -v
    在这里插入图片描述
  2. 在命令行键入npm -v
    在这里插入图片描述
    出现上述两个版本信息说明node环境已经安装完成，npm包管理器也有了。

2. 安装cnpm

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。

2.1 下载cnmp

安装cnmp 我们是需要在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org 即可。
在这里插入图片描述

2.2 检查cnmp 是否安装成功

在命令行中输入cnpm -v
在这里插入图片描述
完成之后，我们就可以用cnpm代替npm来安装依赖包了。

3. 安装vue-cli脚手架构建工具

3.1 下载vue-cil

在命令行中运行命令 cnpm install -g vue-cli，然后等待安装完成(在此处也可以使用npm命令，但是速度会比较慢)。
在这里插入图片描述

3.2 检查vue是否安装成功

在命令行中键入vue list
在这里插入图片描述

4. 创建新的vue项目

4.1 用vue-cli构建项目

通过以上三个步骤，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

  1. 命令行中把目录转到选定的目录(目录无特殊要求)。
  2. 在命令行中运行命令 vue init webpack firstVue（这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中）
  3. 运行初始化命令的时候会让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
    （ 说明：
    Vue build ==> 打包方式，回车即可；
    Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
    Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
    Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
    Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；）

4.2 安装项目所需的依赖

要安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install，等待安装。
安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。
在这里插入图片描述

4.3 运行项目

在项目目录中，运行命令 npm run dev
运行成功后会出现以下弹窗
在这里插入图片描述
然后在浏览器中打开http://localhost:8080, 就会出现如下网页

在这里插入图片描述

5. 运行开源项目

比如说现在我们从GitHub上download一个vue.js的开源项目，下面记录如何在浏览器运行该项目的方法。

5.1 安装webpack

cmd 命令行中见键入npm install webpack -g即可完成安装

5.2 运行项目

  1. 在命令行中cd当项目所在的路径下。
    在这里插入图片描述
  2. 安装依赖, 键入npm install
    在这里插入图片描述
    安装完成后，项目中会多出“node_modules”文件夹
    在这里插入图片描述
  3. 安装node-sass ,键入npm i -D sass-loader@8.x
  4. 安装style-loader, 键入npm install style-loader --save-dev
  5. 安装sass-loader , 键入npm install node-sass@4.14.1
    注意：这里要安装4.14.1 版本，因为要和之前安装的Node Sass version 6.0.1 匹配
  6. 运行项目，键入npm run dev
  7. 出现下图说明运行成功，浏览器会自动打开网页。（如果不能打开，可以手动输入Local 或者NetWork中提供的网址）
    在这里插入图片描述

6. 踩坑记录

直接用命令npm install node-sass@4.14.1安装sass-loader的时候出现如下报错，一开始以为是没装上，装了很多次还是报这个错。后来发现是这里的sass-loader的版本要和要和之前安装的Node Sass的匹配匹配，然后按照指定sass-load版本的命令安装。
在这里插入图片描述
github上下载sass-loader的各个版本
github上下载node-sass的各个版本
官网上的版本对应信息
在这里插入图片描述
查看自己的node版本 node -v
在这里插入图片描述
卸载当前的版本npm uninstall node-sass
安装新版本node-sassnpm install node-sass@4.14.1 (结合上表选择自己需要安装的版本)

【如何在vue3已有项目中，新建分支并创建vue2的项目】同项目多环境分支方案
sky10100100的博客
10-25 294
这样，你便在新的分支中成功创建了一个 Vue 2 项目，同时保留了原始 Vue 3 项目的代码。首先，进入你的 Vue 3 项目目录，然后通过 Git 创建一个新分支。接下来，安装 Vue 2 和其他必要的依赖。在 Vue 2 中，你可以使用。在新分支上，移除 Vue 3 和相关依赖。文件夹中，创建新的 Vue 组件文件，例如。现在可以开始创建 Vue 2 组件。，并使用 Vue 2 的写法。测试通过后，将更改提交到。
已经拿到手的Vue项目该如何启动？
这里是ShareJasmine的博客~
05-17 6187
已经拿到手的Vue项目该如何启动？如何启动一个Vue项目，Vue脚手架怎么启动，许多Vue项目启动的帖子内容都太复杂了，老手不需要看，新手又看不懂。实际上启动一个Vue项目只需要三步。
Vue项目运行步骤(详细图解)
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
11-30 1870
👉🏻Vue项目运行步骤(详细图解)
vue2.0启动已有项目与创建一个新项目
weixin_62042254的博客
11-15 3210
1.安装node 官网下载node，官网地址：https://nodejs.org/en/ ，node -v查看版本号 2.安装npm 需要的包管理器是集成在node中的，安装node之后，直接输入npm -v查看版本号 （可以安装淘宝镜像cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 同理：cnpm-v 查看当前cnpm版本 ） 3.vue安装 .........
vue项目的运行
RainbowTutu的博客
06-23 1万+
npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。控制台输入下面命令清除npm缓存，npm有缓存时，常常出现安装依赖不成功的现象。package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。3、在启动的命令行窗口输入【npm run serve】，回车。
如何打开一个现有的VUE项目
雨田大大的专栏
03-27 1万+
如何打开一个现有的VUE项目。最近为了研究，下载了一个VUE项目，但是一直打不开。经过研究（一番折腾），现把经验记录一下。
vue项目打开
weixin_46581765的博客
09-05 531
1. 进入目标文档，{公司项目是（d盘的 Fangcun）} 2. 进入到文件位置后gie 克隆项目（git clone 具体链接，后面是例子（https://gitee.com/chu1204505056/vue-admin-better.git）） 3.配置依赖 cnpm install 4.启动服务 cnpm run serve 5.复制网址本地打开 例子（http://192.168.10.10:82）
IDEA打开已有vue项目
litlit023的专栏
02-21 2087
在idea中打开已有的vue项目。
使用Vue创建一个新的项目或者打开一个已有的项目
热门推荐
cindy647的博客
08-08 2万+
使用Vue创建一个新的项目或者打开一个已有的项目 打开一个项目 对于一个已经创建好的Vue的项目，比如从GitHub上面fork或download到本地的项目（一个vue的文件夹），想要运行并在浏览器中展示时，简单两步操作即可：（前提是已经有node\npm\vue的环境）， 在命令行输入 node -v，npm -v, vue -V 可分别查看是否安装好以及各自的版本   1. ...
vscode新建一个最简单的vue项目
09-27
在本文中，我们将深入探讨如何使用Visual Studio Code（VSCode）创建一个最简单的Vue.js项目。Vue.js是一款轻量级的前端JavaScript框架，以其易学易用和强大的功能深受开发者喜爱。VSCode作为一款功能丰富的代码编辑...
第一次创建vue项目
01-08
已安装，可能是新建空项目npm install 的， 2：打开webstorm，new vue 自动找到了vue所在，创建就可以 3：打开后显示package.json,yarn run 等它安装，下面会有进度条（等待） 安装完成的文件夹 4：启动 右上角...
使用vue2.0创建的项目的步骤方法
12-10
在本文中，我们将详细探讨如何使用Vue 2.0创建一个新的项目。首先，我们需要确保我们的开发环境已经准备就绪，这意味着我们需要安装Node.js和npm。Node.js是JavaScript的后端运行环境，而npm（Node Package Manager...
vue如何启动项目！
TangMonk的博客
07-15 9024
通常，默认地址是`http://localhost:8080`，但您也可以在命令行中查看实际的地址和端口号。您可以在命令行中输入`node -v`来检查是否已经安装了Node.js，并查看其版本号。然后，Vue CLI会向您展示一些预设选项，您可以选择手动配置或选择预设模板。现在，您的Vue项目已成功启动，并可以在浏览器中进行访问和开发。这将启动一个开发服务器，并编译和热重载您的Vue项目。您将在命令行中看到服务器的地址和端口号。这将全局安装Vue CLI，它是一个用于创建和管理Vue项目的工具。
启动vue的项目
niuchun0的博客
06-14 1774
1，由于启动项目需要下载依赖包，npm国内不稳定，需要借助淘宝镜像安装，安装淘宝镜像 输入命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 2.打开项目前先将文件夹切换到项目目录 cd code  2.用淘宝镜像下载依赖 使用命令 cnpm install   3.运行项目  使用命令 n
【vue create】一.使用vue creat搭建项目
????鱼干～
03-08 3522
【vue create】一.使用vue creat搭建项目
简单上手入门级创建vue项目，vscode打开vue项目，vue使用element-ui组件
weixin_48128217的博客
03-25 2953
如果运行有报错则将 packeage.json下的 "@vue/cli-plugin-eslint": "~5.0.0",删除。等待完成后再次进入创建好的文件vue01，输入npm run serve开始运行。然后cd到vue01目录下npm run serve运行。然后打开 http://localhost:8080/在D盘创建文件vs，在vs下创建vuedemo。输入以上命令进入到vuedemo创建vue01。点击文件，选择打开文件夹，打开刚刚创建的项目。快捷键ctrl+c终止批处理操作。
Vue项目的启动
Bananaaay的博客
07-15 7279
3.Nodejs是一个基于Chrome V8 引擎的 JavaScript 运行时环境，对于没饿浏览器都有自己的javaScript解析引擎，浏览器中的javascript引擎负责来解析和执行我们待执行的js代码，并且每个浏览器中都提供有内置的BOM、DOM这样的API函数，我们能够根据这些内置API函数编写出一些待执行的js代码，最后由我们的浏览器中的JavaScript引擎去执行。然后我们安装我们的nvm，根据安装程序，去选择对应的nvm的安装路径（自动配置环境变量），以及nodejs的路径等。
第2章通信基础知识6h.ppt
最新发布
05-26
第2章通信基础知识6h.ppt
如何创建一个vue项目
07-25
要创建一个Vue项目，你可以按照以下步骤进行操作： 1. 首先，确保你的电脑上已经安装了Node.js。你可以在命令行中输入以下命令来检查是否已安装： ``` node -v ``` 如果安装成功，你将看到Node.js的版本号。 2. 接下来，安装Vue CLI（命令行工具），它可以帮助你快速创建和管理Vue项目。在命令行中输入以下命令来全局安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 安装完成后，你可以使用以下命令来创建一个新的Vue项目： ``` vue create <project-name> ``` 其中 `<project-name>` 是你想要给项目起的名称。运行上述命令后，Vue CLI将会询问你关于项目配置的一些选项，如预设（preset）、特性（features）等。你可以根据自己的需求进行选择，或者直接按回车键使用默认选项。 4. 创建完成后，进入到项目目录： ``` cd <project-name> ``` 5. 最后，你可以使用以下命令来启动项目： ``` npm run serve ``` 这将会启动一个本地开发服务器，并在浏览器中打开你的Vue应用。 现在你已经成功创建了一个Vue项目，可以根据需要进行开发和扩展。祝你使用Vue开发愉快！如果你对具体的Vue开发有更多的问题，欢迎随时向我提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zyw2002

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值