vue安装

https://www.jianshu.com/p/be837ce202db

windows下使用IDEA创建VUE项目

忘川之畔彼岸花开
0.867
2018.01.04?11:39:43
字数?689
阅读?25,253
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安装完毕的效果