• 135456

    文章

  • 827

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

windows下使用IDEA创建VUE项目

2年想跳槽阿里,大咖揭秘大厂面试的那些事儿 >>

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来代替就好了 ,如果权限不够,请使用管理员运行命令提示符

安装淘宝npm镜像

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 `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安装完毕的效果



作者:开始_终结_总是_没变改
链接:https://www.jianshu.com/p/be837ce202db
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客