VUE IDEA搭建与配置

Node.js安装

Nodejs自带npm（类似Maven），安装好Nodejs就安装好了npm

NodeJs下载：https://nodejs.org/en/download/​​​​​​

将vue项目拷进IDEA

淘宝镜像：npm config set registry https://registry.npm.taobao.org

node -v #测试 node 版本

 npm -v #测试 npm 版本

 npm config set registry https://registry.npm.taobao.org #淘宝镜像地址设置

VUE的安装

在IDEA中创建一个静态项目，通过Terminal来安装VUE

IDEA安装Nodejs插件

 

 创建一个静态的web项目 ， 然后安装VUE ， VUE官网地址：https://cn.vuejs.org/v2/guide/

 IDEA配置Terminal

通过Terminal测试node -v与npm -v

使用NPM安装VUE

• 使用Terminal初始化 ：npm init -y

  改名了是初始化NPM，会在项目中产生一个package.json文件。

• 安装vue：

  全局安装（不推荐）：npm install -g vue

  局部安装（推荐） ：npm install vue

  安装成功后VUE的JS库：node_modules/vue/dist/vue.js

[注意] 项目的名称不能使用“vue”，不然会报错

NPM相关命令

全局安装: npm install -g vue（安装工具vue-cli,webpack）

局部安装: npm install vue@2.6.10(vue,jquery,仅仅是我们这个项目要用到js库)

查看模块: npm list vue

卸载模块: npm uninstall vue

更新模块: npm update vue

运行工程: npm run dev/test/online

编译工程: npm run build

注意:

一般来说,js库我们都局部安装就可以了

工具库(每个项目都要用)的话,就全局安装

Vue-cli

官网：GitHub - vuejs/vue-cli: 🛠️ webpack-based tooling for Vue.js Development

 安装命令：npm install -g vue-cli

新建hello-vue-cli staticweb项目 并进入目录

vue init webpack

按指令进行操作

 初始化自动完成后界面

npm run dev

 进入地址栏：http://localhost:8080        界面如下所示即Vue脚手架搭建成功

npm run build 打包可以在Tomcat等服务器运行

关闭服务：ctrl + c

异常处理

vue-cli项目名字中不能带有大写字母

完结撒花~~