用webstorm搭建vue项目

本文详细介绍如何使用WebStorm和Node.js环境搭建Vue项目,包括安装Node.js、配置npm镜像、安装Webpack和vue-cli,以及通过WebStorm创建Vue项目的具体步骤。

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

用webstorm搭建vue项目

2018年04月15日 21:25:47 放学等我别走 阅读数:10811

本文只针对新手。

首先要明白几个名词(概念)。

Node.js:

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 

Node.js 的包管理器 npm,是全球最大的开源库生态系统。

npm:

 

npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

npm的初衷:JavaScript开发人员更容易分享和重用代码。

npm的使用场景:

  • 允许用户获取第三方包并使用。
  • 允许用户将自己编写的包或命令行程序进行发布分享。

npm版本查询:npm -v 

 

Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

下面进入正题

首先现在webstorm,node.js

 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

1.下载安装包之后直接点击安装即可。测试安装成功的界面如下:

2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

安装时间有点长

安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

验证命令:cnpm -v

3.安装webpack

利用npm安装webpack 命令行语句为npm install webpack -g  。时间略长。测试安装成功的界面如下:

 

4.接下来就是全局安装vue-cli。时间略长

安装语句为:npm install --global vue-cli

验证命令:vue -V (V要大写)

5.下面开始使用WebStorm

重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不了的情况

 

红色为新建的顺序,绿色为node.js地址(装好了会自动寻找),蓝色为vue.js包的地址,黄色为打包所用的打包模块

 

填写项目名,注意项目名中不能包含大写字母。

一直点下一步就可以了,项目结构

选中package.json 右键选择 show npm scripts

选择dev双击 即可进行测试。开启成功后会出现默认的端口,赞帖到浏览器中打开,出现下面页面就是成功啦。这样一个vue项目就创建成功了

 

### 使用 WebStorm 创建 Vue 项目的具体步骤和配置方法 #### 1. 确认环境依赖 在开始之前,确保已正确安装 Node.js 和 npm。这是运行 Vue CLI 的必要条件。可以通过命令行验证其版本号: ```bash node -v && npm -v ``` 如果尚未安装,请访问 [Node.js官网](https://nodejs.org/) 下载最新稳定版并完成安装[^1]。 #### 2. 安装 Vue CLI Vue CLI 是一个官方提供的脚手架工具,用于快速搭建 Vue 项目骨架。执行以下命令全局安装它: ```bash npm install --global @vue/cli ``` 完成后可通过 `vue --version` 查看当前使用Vue CLI 版本号以确认成功安装[^1]。 #### 3. 启动 WebStorm 并初始化新项目 打开 JetBrains WebStorm IDE ,选择菜单中的 “File -> New Project...”。此时会出现新建工程向导对话框,在左侧列表里找到并选中“Static Web”,右侧模板语言处勾选“HTML,CSS,JavaScript”。 接着指定保存位置后点击下一步按钮继续前进直到最后一步填写名称即可生成基础框架文件夹结构[^3]。 #### 4. 利用 Vue CLI 构建项目主体 回到终端窗口切换至刚才创建好的空白目录下(假如叫 my-vue-app),然后输入如下指令启动交互式引导过程来定制专属应用特性集: ```bash vue create . ``` 注意这里的`.`代表当前位置即刚建立的那个空壳子文件夹名字my-vue-app 。根据提示逐步做出选项决定诸如Babel、ESLint等插件添加与否等问题。 #### 5. 设置 Node.js 解释器与包管理器 进入 WebStorm 的设置界面 (`File -> Settings`),导航到 `Languages & Frameworks -> Node.js and NPM` 部分。在这里设定合适的 Node.js 解析程序以及配套的软件包管理者(Package Manager)[^3]。 - **Node Interpreter:** 指定本地机器上的 node.exe 路径或者让IDE自动检测发现。 - **Package Manager:** 一般情况下保留默认值/npm 就可以满足需求除非有特殊理由考虑yarn替代方案。 调整完毕之后记得按下 Apply 键盘按键使更改生效。 #### 6. 加载外部库依赖关系 当上面提到的所有前期准备工作都已完成以后,就可以安心等待 WebStorm 自动同步 package.json 文件里面列举出来的各项第三方模块清单了。一旦这个进程结束就意味着整个开发平台已经处于完全可用的状态之中。 --- ### 示例代码片段 下面给出一段简单的 HelloWorld 组件例子帮助理解基本概念: ```html <template> <div class="hello"> {{ msg }} </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello { color: blue; } </style> ``` 此段落演示了一个典型的 SFC(单文件组件)是如何组合 HTML 模板、JS 行为逻辑还有 SCSS 外观样式的[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值