下载地址:https://nodejs.org/zh-cn/
四.打开IDEA准备创建项目
1.打开IDEA创建一个 Static Web 项目
npm i -g cnpm --registry=https://registry.npm.taobao.org
七.还缺少一个文件夹:node_modules,这个文件夹是整个项目依赖包。
-
进入项目中执行cnpm install
八.查看IDEA的Static Web里的Vue项目
九.运行Vue项目:cnpn run dev
十.配置好IDEA的Vue环境
1.在setting中的plugins安装Vue.js插件
2.配置HTML支持.vue后缀的文件
3.配置ECMAScript6
补充:
1)Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装,Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。总结一下,node,js提供了javascript在浏览器以外的一个执行环境,满足一些特定的场景需求。
2)npm 是 node.js 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于node.js开发的类库和插件。
3)WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。
4)iveiw是一套基于 Vue.js 的高质量 UI 组件库,通过iveiw可以快速的开发出风格一致的前端界面
5)app.vue可以当做是网站首页,是一个vue项目的主组件,页面入口文件 ,所有页面都是在App.vue下进行切换的。是整个项目的关键,app.vue负责构建定义及页面组件归集。
6)main.js 程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件。
7)App.vue是项目的主组件,页面入口文件 ,所有页面都在App.vue下进行切换,app.vue负责构建定义及页面组件归集。
8)router里的index.js 把准备好路由组件注册到路由里。
9)index.html:vue编译后的html文件入口。
10)src:放置组件和入口文件。
11)node_modules:项目锁依赖的模块/包。
12)config:配置了路径端口值等。
13)build:配置webpack的基本配置、开发环境配置、生产环境配置等。
范例:
1)安装iview
2)在main.js中加入iview
3)使用iview
首先,我们在工程目录componets下新建一个Login.vue文件。并且登录iview的官网找到Form表单组件。复制代码到Login.vue中
4)修改Login.vue代码并且安装和使用axios
在命令行内输入
npm install axios -S
进行安装。
安装完成后在main.js中使用axios,在main.js中加入以下代码
import axios from 'axios'
Vue.prototype.$axios = axios
这样就可以在全局中使用axios做请求了。
我们在表单校验通过的时候使用axios来请求后台。代码如下
运行VUE项目:npm run dev