vue环境搭建+vue项目导入idea

mac 搭建vue环境；导入vue项目idea

一、搭建node.js

node.js下载地址：http://nodejs.cn/download/

1.因为我的电脑是mac，所以我下载的是 macOS 安装包（.pkg）,安装包版本node-v14.15.4.pkg

2.点击安装包会安装node、npm，点击下一步即可

This package will install:
    •    Node.js v14.15.4 to /usr/local/bin/node
    •    npm v6.14.10 to /usr/local/bin/npm

3.验证是否安装完成

输入 node -v 如果出现版本号，则说明安装成功，npm包管理器是集成在node中的，所以，直接输入 npm -v 就会显示npm版本信息，如下：

$ node -v

v14.15.4

$ npm -v

6.14.10

4.变更npm镜像或安装cnpm

（1）镜像查询，npm get resgitry，‘https://registry.npmjs.org/’是国外的镜像，所以在下载依赖包时会很慢或失败。

$ npm get registry

https://registry.npmjs.org/

（2）由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，npm修改成淘宝镜像，如下

$ npm config set registry http://registry.npm.taobao.org/ #修改成淘宝镜像

$ npm config set registry https://registry.npmjs.org/ #镜像还原

（3）我选择安装cnpm，使用cnpm去下载依赖包，执行以下命令然后等待安装，安装完成之后，我们就可以用cnpm代替npm来安装依赖包了。

$ sudo chmod 777 /usr/local/lib/node_modules 

$ npm install -g cnpm --registry=http://registry.npm.taobao.org 

$ cnpm get registry

http://registry.npm.taobao.org

（4）cnpm安装服务

$ cnpm install [name]

（5）安装vue-cli，webpack

$ cnpm install -g vue-cli

$ cnpm install -g webpack

#最新稳定版本

$ cnpm install vue

二、vue项目导入idea

1.在IDEA中配置vue插件(我已安装过，首次点install)

2.不要使用 import  去引入项目，因为不是传统的项目结构这样打不开，直接使用open 打开文件夹即可。

3.打开Terminal，进入项目目录下，执行cnpm install ，安装依赖包（因为我已经有package.json，所以直接安装）

$ pwd
/Users/xxx/IdeaProjects/项目名
$ ll package.json 
-rwxr-xr-x  1 wzy  staff  2247 Jan 17 22:39 package.json
$ cnpm install
 

4.运行vue项目

5.配置好后就可以正常运行了

6.或在项目目录下，命令行启动

$ npm run dev