webStorm上使用vue
1.webStrom的安装
WebStorm是Jetbrains公司旗下的一款JavaScript开发工具,因其界面简洁,操作方便,被广大国内JS开发者誉为“Web前端开发神器”。
- 官网下载 https://www.jetbrains.com/webstorm/
- 安装webStorm(运行webStrom.exe文件,进行安装)
2.node.js的安装
1、什么是node.js
Node.js是一个Javascript运行环境。
2、下载地址
访问Node.js官网(https://nodejs.org/en/download/)进行安装包下载。
3、下载完成后进行安装
如果是用安装程序进行安装,在安装过程中会自动进行Nodejs环境变量的配置,如果是通过其他方式进行安装,可能需要手动配置环境变量。
完成安装后,可以打开命令行,直接使用node命令,进入node.js交互模式。然后可以输入console.log("Hello,World");测试安装。
4、安装完成node.js的时候npm也就也安装成功了
npm是node.js的管理工具
3、git的安装
1、下载Git,官网地址:https://git-scm.com/,进入官网首页
2、下载完成后进行安装
4、安装webpack和vue-cli脚手架
1、什么是vue-cli
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板。
2、怎么用呢?
我们首先我们要建一个储存webstorm项目的文件夹,我的命名是webStorm。
进入到这个文件夹,右键,选择Git Bath Here。
输入命令行: npm install webpack -g(下载全局webpack)
输入命令行:npm install vue-cli -g(下载全局vue-cli)
5、创建Vue测试项目
下载完成之后,输入命令行:vue init webpack projectTest (projectTest 是项目名,我的项目名就叫projectTest )
然后它会询问你一些问题:
等一会项目就建好了。
输入命令:cd myproject 进入到项目文件中
输入命令: npm install 初始化安装依赖
输入命令: npm run dev 执行
选中http://localhost:8080,鼠标右键复制,在浏览器打开。看到欢迎页面。(如果看不到的话,请看https://blog.csdn.net/Mzjuser/article/details/83035926)
6、webstorm中运行vue项目
打开webstrom——>open——>选择项目——>新窗口打开。
然后如下图所示进行操作:
完成后,点击右上角绿色的小按钮,就启动了,启动完成,直接点击控制台的网址就进入到了欢迎页面。