基于idea,从零开始搭建第一个vue项目
一、基础知识了解
搭建vue项目,需要了解node.js、npm或cnpm、webpack、vue、iview的基础只是
1、Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript,是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
参考地址:Node.js教程
2、npm
npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。
参考地址:npm官方文档
3、cnpm
cnpm是个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
4、webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
参考地址:webpack中文文档
5、Vue
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
参考地址:vue.js官网
6、iview
一套基于 Vue.js 的高质量 UI 组件库,通过iveiw可以快速的开发出风格一致的前端界面。
二、Node.js的安装
1、下载地址:https://nodejs.org/en/download/
2、下载完成之后直接进行安装
3、使用cmd命令窗口,查看是否安装成功
node -v
npm -v
能返回node和npm的版本,表明安装成功 !!!
三、用idea搭建项目
这里需要安装vue脚手架工具
1、打开idea新建项目
-
第一步,在项目的模板页面,选择 Static Web模块,然后点击next
-
第二步,填写项目名称和项目的存放地址,然后点击Finish,完成创建。(注:这里我建的项目名称为example,仅供参考)
2、安装Vue脚手架工具
(注:vue可以在安装node的时候一起安装,也可以在新建的项目中安装)
- 第一步,打开idea的Terminal,先安装npm的淘宝镜像
输入命令:
npm i -g cnpm --registry=https://registry.npm.taobao.org
我之前安装过,图片仅供参考
- 第二步,下载完成之后,继续下载vue脚手架工具
依次输入命令:
npm i -g vue-cli
vue -V (查看Vue的版本)
- 第三步,安装完成之后,初始化包结构(使用webpack)
输入命令:【 vue init webpack 包名 】
vue init webpack example
特别注意!!!:在第三步的时候有可能会报如下错误:
Command vue init requires a global addon to be installed. Please run npm install -g @vue/cli-init
大概意思是如果你要使用命令vue init还需在全局下安装cli-init,此时执行下面的命令,然后再执行第三步的语句即可。。。。。。。。
执行命令:
cnpm install -g @vue/cli-init
输入命令之后,会进行初始化设置,可以参考下图进行设置
- 第四步,初始化完成之后,会出现三行黄色字体,依次在Terminal中输入这三行字体
- 第五步,输入完成之后,会出现如下图所示的链接
- 第六步,点击网址 或者 打开浏览器,在浏览器中输入localhost:8080,出现下图的界面,证明项目搭建成功!!!