文档章节

node.js + vue + view框架

史文帝
 史文帝
发布于 2018/03/10 15:13
字数 820
阅读 31
收藏 0

​​​​​​1.下载node.js:http://nodejs.cn/  安装node一路回车就行了,这里不详细说明

2.安装完后检查node是否安装成功,在控制台上输入$node -v ,如出现banb版本号,便是安装成功

 

 

注:这里可以使用自带的控制台,与其他的软件上面的,都是可通用的

 

3.一般安装node后,npm是不用单独安装的,因为已经在node已经自带了,查看npm版本号代码:npm -v

如:

 

4.安装淘宝镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

安装

$ npm install -g nrm

使用

列出可选的源

; nrm ls                                                                                                                                    

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - http://registry.npm.taobao.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/

带 * 的是当前使用的源,上面的输出表明当前源是官方源。

切换

切换到taobao

; nrm use taobao                                                                                                                             

   Registry has been set to: http://registry.npm.taobao.org/

增加源

你可以增加定制的源,特别适用于添加企业内部的私有源。 私有源可以使用cnpmjs架设 。

nrm add  <registry> <url> [home]

删除源

nrm del <registry>

测试速度

你还可以通过 nrm test 测试相应源的响应时间。

例如,测试官方源的响应时间:

; nrm test npm                                                                                                                               

  npm ---- 1328ms

测试所有源的响应时间:

; nrm test                                                                                                                                   

  npm ---- 891ms
  cnpm --- 1213ms
* taobao - 460ms
  eu ----- 3859ms
  au ----- 1073ms
  sl ----- 4150ms
  nj ----- 8008ms


5.安装webpack

npm install webpack -g

安装vue脚手架

npm install vue-cli -g

检查vue脚手架是是否搭建成功:vue -V (在此注意V为大写)

 

6.这些搭建好之后,就准备开始vue了

一般我会使用一个编辑器的终端,这样毕竟方便,编辑与看环境的提示,如:

Visual Studio Code编辑器

按住ctrl+~ 就会调用该编辑器的终端;

如果我想到e盘安装vue,那么:

稍等一会,就会在e盘中会出现一个文件夹,如:

 

安装完后,cd vue_view 进入该文件夹目录,安装依赖

很显然已经安装成功,那么我们运行起来看看吧!

很显然控制台已经告诉我们,在浏览器中输入 http://localhost:8080 就能打开,我们已经安装成功的vue。

7.我们vue安装完成,现在我们来继续安装依赖于vue的第三方ui框架

如:安装 http://element-cn.eleme.io/#/zh-CN 饿了么 ui,但是这个框架组件,没有view组件全面,所以暂时推荐 view:https://www.iviewui.com/docs/guide/install

NPM 安装

推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用

$ npm install iview --save

这个安装的目录也是在我刚才安装vue的 e盘vue_view文件夹中安装

安装完成后,再重新安装一遍依赖包,cnpm install

安装完成后:配置一下router文件夹中index.js

配置与上完成后,npm run dev 来运行

当然也是在浏览器上的8080窗口看见效果。

来测试一遍,直接打开view ui 的网页,里面的代码直接往贴

显而易见:

这个view ui的组件我们已经调用成功。。。

这些知识简单的配置,希望能够对您有用

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
Vue.js 新手入门教程之环境搭建(一)

本文相关引用来自Vue官网 https://cn.vuejs.org/ 作为一个Java后端程序员觉得有必要了解一下当前流行的Vue框架(PS:公司目前后台管理系统前端用的是老掉牙的easyui~囧),是时候更新换代了。...

青小城
2018/10/19
0
0
vue.js在windows本地下搭建环境和创建项目。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方...

皇冠小丑
2016/12/26
0
0
vue路由组件左右切换(兼听手机返回键或自写按钮)

1 安装vue-cli (1) 下载安装node.js (1) npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 (1) cnpm install -g vue-cli 全局安装vue-cli 已安装则不用 (1) vu......

任倩坤
2018/05/18
0
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
2018/05/22
0
0
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
2018/04/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
43
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
4
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
10
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部