WebStorm从零搭建vue项目

WebStorm从零搭建vue项目

一、安装node.js

下载地址: node.js官网
安利大神安装教程,不懂猛戳:node.js安装及环境配置之Windows篇
配置环境变量: node.js配置环境变量

查询node.js是否安装成功:打开cmd窗口输入 node -v
显示版本即安装成功

二、安装完成node.js,npm也安装完成了

npm是node的包管理工具。
验证命令:npm -v

三、安装CNPM淘宝镜像

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

四、安装webpack

利用cnpm安装webpack 命令行语句为:cnpm install webpack -g

注意:此处利用cnpm安装webpack

验证命令:webpack -v

五、全局安装vue-cli

安装语句为:cnpm install --global vue-cli
验证命令:vue -V

注意:此处大写 V
六、安装Git

安装地址:Git官网

安装与配置环境:Git安装与配置环境

以上是创建vue项目前的所有准备工作:
最后验证一次:
验证

七、用WebStorm新建项目

1、File ——>> New ——>> Projet
用WebStorm新建项目
2、选择Vue.js
创建
3、正在创建项目
正在创建项目
4、项目名称
项目名称
5、项目描述
项目描述
6、项目作者
项目作者
7、选择第一个即可
在这里插入图片描述
8、安装路由,可yes可no 任君选择
(这里选择yes)
在这里插入图片描述
9、ESLint规则

ESLint是什么:官方网站

在这里插入图片描述
10、设置单元测试(按个人喜好)
在这里插入图片描述
11、是否设置e2e测试(随意)
在这里插入图片描述
创建成功!

八、运行

点击菜单栏View | Tool Windows | npm
在这里插入图片描述
双击start
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
OK! 搞定
可以开始你的vue项目啦

发布了18 篇原创文章 · 获赞 4 · 访问量 4888

猜你喜欢

转载自blog.csdn.net/xiaojun201593/article/details/92565926
今日推荐