为了账号安全,请及时绑定邮箱和手机立即绑定

Vue.js 新手入门教程之环境搭建(一)

标签:
Vue.js

作为一个Java后端程序员觉得有必要了解一下当前流行的Vue框架(PS:公司目前后台管理系统前端用的是老掉牙的easyui~囧),是时候更新换代了。

学习目的:构建前后端完全分离的单页面应用

一、什么是Vue.js

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

二、特性

*声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

<div id="app">
 {{ message }}</div>
var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'
  }
})
Hello Vue!

这是一个简单的Vue应用。Vue实现了数据和DOM的关联,他们之间所有的东西都是响应式的。如果我们在浏览器控制台修改message的值(app.message=Hi),页面上的Hello Vue!也相应的更新为“Hi”

*组件化构建应用

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:

webp

页面上存在的元素都可分解为一个一个组件

三、环境安装

1.NPM安装vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpackBrowserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

# 最新稳定版$ npm install vue

如果未安装nodejs则会报错需要先行安装nodejs环境:

nodejs官网(https://nodejs.org/en/download/),选择相应的包开始安装,安装步骤如下:

webp


安装成功后进入cmd,输入

#输入node -v  显示node.js的版本号则说明安装成功node -v 
#输入npm -v 显示npm版本说明自带的npm也已经安装成功,npm这里的作用是对Node.js依赖的包进行管理(类似于Java项目的maven)npm -v

webp

nodejs环境安装成功


至此nodejs安装成功。(注:以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中 。npm目录:下载的具体模块文件  npm-cache目录:npm的缓存文件)

由于国内访问速度较慢,建议将 NPM 源设置为国内的镜像,可以大幅提升安装速度。

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

2.安装webpack

cnpm install webpack -g

3.安装vue脚手架

npm install vue-cli -g

在计算机创建一个工程目录例如:d:\vueproject\,并进入该目录

cd d:\vue-project\

根据模版创建项目vue init webpack-simple 项目名

vue init webpack demo

webp

创建成功

项目结构如下:


webp

4.安装项目依赖

cd demo #进入项目npm install

5、安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

6、安装elementui

npm install element-ui --save

6、安装axios

npm install axios

7、启动项目

npm run dev

webp


访问:localhost://8080,成功部署~


webp

如果需要ip地址访问需要更改config目录下的index.js文件


webp


webp


将localhost修改为0.0.0.0
重启应用npm run dev



作者:青小城
链接:https://www.jianshu.com/p/ded3236a59ca


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消