Webstorm + vue 环境搭建+开发

首先普及几个概念

node.js

node.js 并不是一个 js 框架，千万不要认为node.js是类似jquery的框架。
node.js一种javascript的运行环境，能够使得javascript脱离浏览器运行，类似JVM之于java
从有了nodejs后就催生出一大批用js做后台开发的前端人员

NPM

npm （Node Package Manager）是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

webpack

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,

vue-cli

vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。其中包括CLI， CLI-Service， CLI-插件
其中CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

安装

用webstorm搭建vue项目
Mac安装Vue环境

1. 先查看电脑里有没有安装vue:

命令：vue -V //注意V大写，若提示 command not found 则进行下一步；若提示版本号为：2.9.6 ，则需要卸载这一版本
ps:很多人用

npm install vue-cli -g 

命令，安装的都是2.9.6版本，最新的版本安装命令是

npm install -g @vue/cli

另，3.0以上版本集成了图形界面，所以放弃2.9.6吧
卸载2.9.6等旧版本的命令：

sudo npm uninstall vue-cli -g

2. 新版vue脚手架安装命令：

 sudo npm install -g @vue/cli

前面加sudo 是获取系统的权限，之后需要输入密码，不加sudo可能因为权限的问题安装失败。

3. 如果安装vue出现一些警告和错误，别管他，清除一下缓存就行

清除缓存的命令：

npm cache clean --force

清除缓存后，用vue -V 命令查看版本，2019.05.11安装的版本是3.7.0

我在用webstorm新建vue项目时报错，还没找到原因，改为用命令行创建项目，先cd到目录下，然后执行命令

sudo vue create test-demo 

遇到 EACCES: permission denied，

stack Error: EACCES: permission denied

可以根据提示将目录更改权限

sudo chmod 777  目录

也可以改一下安装命令

sudo npm install -g <ModuleName> --unsafe-perm=true --allow-root

列如

sudo npm install -g webpack --unsafe-perm=true --allow-root

我在Webstorm里新建vue项目遇到问题

改一下vue/cli目录

vue-cli中webpack配置详解

webpack 删除/卸载命令

完全卸载webpack,再重新安装