一、需要了解的基本知识

node.js

npm

webpack

vue2

iview

二、node.js安装

下载地址:

https://nodejs.org/en/download/
下载完成后安装(直接按默认方式安装就行)

百度网盘链接:

https://pan.baidu.com/s/1HuzF6C6RwuktaFreHE_3Cg 提取码:qek9

打开cmd 输入下面的命令查看是否成功安装

node -v
npm -v

在idea上创建javascript idea创建javascript项目_在idea上创建javascript

三、搭建项目

1 .打开idea,新建项目

Create New Project > Static Web>填写project name和选择保存的工作空间>Finish

在idea上创建javascript idea创建javascript项目_在idea上创建javascript_02


在idea上创建javascript idea创建javascript项目_Vue_03

2.安装vue脚手架工具

首先安装npm的淘宝镜像(下载速度比较快),打开idea的Terminal

在idea上创建javascript idea创建javascript项目_vue_04


输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

等待下载完成以后,继续安装vue的脚手架工具,在Terminal内继续输入以下命令

npm i -g vue-cli

测试是否安装成功:

vue -V

脚手架安装完成后,初始化包结构,继续输入

vue init webpack demo

demo为你前面新建的项目名。初始化会进行设置。可参考此处设置。

在idea上创建javascript idea创建javascript项目_Vue_05


初始化完成后。依次在Terminal输入图片内的黄色文字

在idea上创建javascript idea创建javascript项目_在idea上创建javascript_06


这个地方需要注意一下,第二行黄色文字只输入npm install就行了,不要全部复制。还可能回报一下错误:

在idea上创建javascript idea创建javascript项目_V8_07


这是缓存造成的,可以执行命令清一下缓存:

npm cache clean --force

完成后,会提示在哪个端口可以访问,此处现在是8080

在idea上创建javascript idea创建javascript项目_V8_08


打开浏览器输入:localhost:8080,出现以下画面,简单的demo就搭建完成了 。

在idea上创建javascript idea创建javascript项目_Vue_09