Vue+Webstrom环境搭建

一、安装Node.js和VUE脚手架

1、先安装Node.js，安装地址 https://nodejs.org/en/download。

2、在node的安装目录下 D:\node\XXX\node.js 新建两个文件夹node_cache和node_global,
     用于存放npm指令下载的东西，避免占用C盘空间。
       D:\node\XXX\node.js\node_cache

       D:\node\XXX\node.js\node_global；

     然后在命令行下输入 npm config set prefix " D:\node\XXX\node.js\node_global"

                                 npm config set cache " D:\node\XXX\node.js\node_cache"

将来，npm install  xxx -g 下载的内容就放在这两文件夹下，方便管理许多。

3、修改了路径，则需要重新配置环境变量：

（1）在系统变量Path中新增变量 D:\node\XXX\node.js\node_global\node_modules;

（2）在用户变量中变量（C:\Users\用户名\AppData\Roaming\npm）修改为 D:\node\XXX\node.js\node_global；

4、安装淘宝镜像，命令行下输入npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后在环境变量中添加：D:\node\XXX\node.js\node_global\node_modules\cnpm

在命令行输入：cnpm -v 出来版本表示安装成功。

5、安装webpack，利用cnpm安装webpack，输入命令 cnpm install webpack -g；

6、安装vue-cli，输入命令 cnpm install --global vue-cli；验证命令 vue -V（-后的V要大写），出现版本号代表成功。

二、安装WebStrom

傻瓜式安装，需要破解，推荐https://blog.youkuaiyun.com/liuxin00020/article/details/89467519

2019.2版本成功破解

三、创建VUE工程

1.执行命令：vue init webpack myproject，然后填写完之后，就可以静静的等待它下载了。

1.1.具体代表：

1.1.1.Project name (myproject)；项目名称（myproject）。（确定按enter，否按N）

1.1.2.Project description (A Vue.js project)；项目描述（一vue.js项目）。（用英文，不写直接回车也行）

1.1.3.Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N）

1.1.4.Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render

functions are required elsewhere；VUE文件渲染功能是必需的其他地方。（按enter）

1.1.5.Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，建议安装，因为项目肯定能用上）

1.1.6.Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法,除非你非常懂ESLint语法，要不就会处处报错，之前不明白的时候选择过一次，总之很烦，建议N）

1.1.7.Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N）

1.1.8.Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）

1.1.9.should we run 'npm install' for you after the ogject has been created? ;(选择Yes，use NPM)

2、创建成功后会提示如下命令

3.你可以直接进入项目去运行，浏览器去访问，也可以通过webstorm去打开生成的文件夹，然后运行访问。