做这份笔记的时候,Vue.js还是1.0,10月份Vue已经升级到2.0,这边也进行相应的更新,用Vue2.0进行一个简单的环境搭建

饿了么也刚好开源了其基于Vue.js的UI框架element-ui

传送门

1. 环境搭建

由于办公环境是在Windows下开发,所以还是选择在Windows进行Vue.js的开发,使用NodeJS环境进行编译,打包等

1.1 NodeJS及NPM安装

1.1.1 NodeJS下载

在NodeJS官网中下载对应的NodeJS版本https://nodejs.org/en/

下载完成后进行安装,NodeJS安装完成后,对应的NPM也会安装完成,安装完成后需要设置NodeJS到环境变量中,在CMD命令行键入以下代码,验证NodeJS及NPM是否安装正确 目前最新版本4.6.0对应npm版本2.15.9,可以手动升级到最新版本npm

> node -v
v4.6.0
> npm -v
v2.15.9

npm升级到最新版本的方法

切换路径到nodejs安装目录下(如:c:\program files\nodejs\),执行以下命令:

npm install npm@latest -g

1.1.2 安装nrm

由于npm的镜像资源在国外,访问速度慢,可以使用npm安装nrm,来管理npm的镜像资源

> npm install -g nrm

使用nrm ls命令查看可用的资源



使用 nrm use ***选择要使用的镜像,如nrm use taobao

1.1.3 安装打包工具webpack

使用

npm install -g webpack

安装webpack

1.2 使用Vue的官方命令行工具搭建一个简单的VueJS应用

1.2.1 安装vue-cli

使用命令

npm install -g vue-cli

安装Vue的官方命令行工具vue-cli

1.2.2 用vue-cli搭建一个基本的工程

使用以下命令,创建一个名为vue-test的前端项目

vue init webpack vue-test

此致环境的搭建基本完成

VueJS搭建简单后台管理系统框架(一)环境搭建的更多相关文章

  1. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  2. 简单后台管理系统框架--HTML练手项目2【Frameset】

    [本文为原创,转载请注明出处] 技术[HTML]   布局[Frameset] 无步骤 <!DOCTYPE html> <html lang="en"> & ...

  3. 使用React全家桶搭建一个后台管理系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...

  4. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. ASP.NET MVC搭建项目后台UI框架—7、统计报表

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  7. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  8. 从零开始搭建WebAPI Core_SqlSugar管理系统(一) 项目环境需求以及项目搭建

    从零开始搭建WebAPI Core_SqlSugar管理系统(一) 项目环境需求以及项目搭建 环境需求 想要使用.NET Core,首先你的Visual Studio(以下简称vs)升级到较高的版本, ...

  9. Redis入门很简单之一【简介与环境搭建】

    Redis入门很简单之一[简介与环境搭建] 博客分类: NoSQL/Redis/MongoDB redisnosqlmemcached缓存中间件  [Redis简介] <一>. NoSQL ...

随机推荐

  1. UMeditor 百度编辑器Mini学习

    准备开始研究百度的mini编辑器 1.4.3的昨天配置好了 ,也可以用了(.net 3.5) 为此我废了好大的力 研究了一天才弄好   结果今天一来上司就说 这个1.4.3 我们没必要用这么大的  用 ...

  2. Web--->>>Cookie与Session

    1.cookie 1.cookie是存在客户端(浏览器)的进程内存中和客户端所在的机器硬盘上 2.cookie只能能够存储少量文本,大概4K大小 3.cookie是不能在不同浏览器之间共享 3.创建c ...

  3. Android学习之简单的数据存储

    在Android中,数据存储是开发人员不可以避免的.Android为开发者提供了很多的存储方法,在前面的博客中,已经讲述了sqlite存储数据.今天将介绍用SharedPreferences来存储数据 ...

  4. 操作Sql数据库帮助类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  5. android经典Demo(转载)

    一篇不错的资源博文,转载分享给大家:   1.Android团队提供的示例项目  如果不是从学习Android SDK中提供的那些样例代码开始,可能没有更好的方法来掌握在Android这个框架上开发. ...

  6. juce中的Singleton

    说明上其实很明白,支持多线程,防止重复创建,同时支持如果删除以后就不在创建,利用局部静态变量进行标记.挺通用,看来下次写个c11版本的 //============================== ...

  7. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  8. Ubuntu root登陆

    分两步: 1.激活root 输入命令:sudo passwd,键入当前用户密码之后,为系统设置root密码:交互如下: jack@ubuntu:~$ sudo passwd[sudo] passwor ...

  9. MySQL----数据的显示位宽

    问题:在MySQL表中的列可以定义它显示的位宽.那么定义了位宽会不会影响数据的取值范围呢? 测试: 1.定义一个用于测试的表 create table t(x int,y int(2),z int(2 ...

  10. linux查看网卡个数及速度

    # lspci | grep Ethernet03:00.0 Ethernet controller: Broadcom Corporation NetXtreme II BCM5708 Gigabi ...