如何打开一个现有的VUE项目

最近为了研究,下载了一个VUE项目,但是一直打不开。经过研究(一番折腾),现把经验记录一下:

1.从网上下载一个VUE项目

2.删除“node_modules”文件夹

3.删除package-lock.json

4.打开cmd,cd到项目目录

5.运行npm install,重新安装依赖。(这里可能会出现问题,见后面问题1)注意:可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

6.运行npm run build 打包。

7.最后运行npm run dev后项目成功运行。(这里可能会出现问题,见后面问题2)

8.然后出现一个dev的问题,好像是版本问题

不管,直接用npm run serve

终于把项目运行起来了

问题处理:

问题1:npm install 安装不成功,提示python2.7,解决:

下载了一个python2.7.18 64bit的安装好,在环境变量里设置好安装路径,例如“C:\Python27”

重启后,用“python -V”测试一下,若返回“Python 2.7.18”就说明装好了,然后继续。

问题2:出现缺node-sass

运行npm install --save-dev node-sass

继续运行npm run dev

显示找不到 node_modules/node-sass/vendor 模块。

跑到那个文件夹下面手动新建一个vender文件夹。(对,是“vender”,不要写错了)

然后运行,npm rebuild node-sass --save-dev

看一下是否有新的内容添加了win32-64-48/binding.node

有的话就说明成功了,然后继续运行npm run dev

### 如何在 WebStorm 中创建 Vue 项目 #### 准备工作 为了能够在 WebStorm 中顺利创建 Vue 项目,需要先完成一些必要的准备工作。这包括安装 Node.jsVue CLI 工具链。 - 安装 Node.js 是基础环境的一部分[^3]。可以通过访问官方站点 (http://nodejs.cn/) 下载并安装最新稳定版。安装完成后,在终端运行 `node -v` 来验证是否成功。 - 接下来,通过全局安装 Vue CLI 来支持脚手架工具的功能。可以使用如下命令来实现: ```bash npm install -g @vue/cli ``` 或者如果网络较慢,可以选择淘宝镜像源进行加速: ```bash npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g @vue/cli ``` - 验证 Vue CLI 是否正确安装,可以在终端输入以下命令检查其版本号: ```bash vue -V ``` #### 创建 Vue 项目的具体步骤 一旦准备阶段结束,便可以直接进入实际操作部分: 1. **启动 WebStorm 并新建项目** 打开 WebStorm 软件界面后,选择 “Create New Project”,随后指定项目目录以及名称。 2. **初始化 Vue 项目结构** 利用 Vue CLI 提供的交互式向导功能快速搭建初始框架。打开集成终端或者外部命令行窗口,切换到目标文件夹位置,执行下面这条指令: ```bash vue create my-vue-project ``` 这里会弹出一系列选项让用户定制化设置比如预设插件列表等参数[^2]。 3. **引入额外依赖库(可选)** 如果计划采用 Element UI 组件库增强用户体验设计,则需进一步追加相关模块至现有工程之中。具体做法是在项目根目录下运行下列语句完成下载过程: ```bash npm install element-ui --save ``` 4. **配置 main.js 文件启用 Element UI 功能** 编辑位于 src/main.js 的入口文件内容,加入如下代码片段以便激活整个应用范围内的样式资源加载机制: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 5. **测试运行效果** 当所有前期构建完毕之后,最后一步就是确认一切正常运作无误。借助内置服务端模拟器轻松发起本地调试模式即可直观感受成果展示情况: ```bash npm run serve ``` 以上便是完整的流程概述说明文档[^1]^,^^,^.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值