windows下利用IDEA创造VUE项目

1.环境搭建

1.1检测是不是安装好nodejs和npm

检测命令

node -v

npm -v

若是没有设置需求先安装

nodejs的下载路径:https://nodejs.org/en/download/

在Windows上安装时务必接纳任何零件,包含勾选Add to Path。

设置到位后,在Windows环境下,请打开命令提醒符,

idea cmd窗口

然后输入node -v,即使设置正常,你应该看到  版本号 输出:

自我批评nodejs是还是不是安装成功

npm是Node.js的包管理工具(package
manager),Nodejs的安装程序默许安装npm,在命令提示符或者极端输入npm
-v,可以见到类似以下的输出:

检查npm

在cmd中一直利用npm来安装的一对工具的话会相比慢,所以我们采取天猫商城的npm镜像: 

输入npm i -g cnpm
–registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了
,要是权力不够,请使用管理员运行命令提醒符

安装Taobaonpm镜像

1.2安装vue-cli,vue脚手架

行使如下命令

cnpm i -g vue-cli

安装vue-cli

测试是不是安装成功:

vue -V

反省vue是不是安装成功

2.品类设置和创建

2.1装置项目

第一进入工作目录(要是不在工作目录),使用cd 命令

进入工作目录

利用脚手架安装项目:

vue init webpack first_vue 

控制台显示:

升迁目录已存在,是不是持续:Y

Project name(工程名):回车

Project description(工程介绍):回车

Author:作者名

Vue build(是不是安装编译器):回车

Install vue-router(是不是安装Vue路由):回车

Use ESLint to lint your
code(是或不是采纳ESLint检查代码,我们接纳idea即可):n

Set up unit tests(安装测试工具):n

Setup e2e tests with Nightwatch(测试相关):n

Should we run `ECMAScript,npm install` for you after the project has been
created? (recommended):选择:No, I will handle that myself

2.1起头化项目

跻身项目目录

cd firstVue

初步化项目

cnpm i

类型目录结构

运转项目

cnpm run dev

浏览器打开:localhost:8080,即可打开vue项目

Ctrl+C退出运行

2.3 配置idea

File – Settings – Languages&Frameworks – JavaScript:修改JavaScript
language version为ECMAScript 6,确认

File – Settings – Plugins:搜索vue,安装Vue.js

Run – Edit
Configurations…:点击加号,选拔npm,Name为Run,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就足以平昔在idea中运作了

持续点击加号,选取npm,Name为Build,package.json选用你工程中的package.json,Command为run,Scripts为build,然后就足以一向在idea中打包了。

2.4 安装使用stylus(是一种健康的css)

cnpm install –save-dev stylus stylus-loader

stylus安装完结的成效