从安装node js到构建一个vue并启动它
1、安装node js
下载地址:http://nodejs.cn/download/
2、安装完成后运行Node.js command prompt(node -v查看安装版本)

3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本)

4、注册cnpm来代替npm
使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org
如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"
5、安装vue脚手架vue-cli
命令:cnpm install -g vue-cli
安装成功后可以用 vue -V 查看vue版本
6、cd到对应的目录下初始化vue项目
命令:vue init webpack my-project
Project name 项目名
Project description 项目名描述
Author 作者邮箱
Use ESLint to lint your code? 是否需要ESlist语法检查
Setup unit tests with Karma + Mocha? 是否需要单元测试
Setup e2e tests with Nightwatch? Yes是否需要e2e测试
7、package.json为项目依赖资源,如果要运行这个项目需要使用cnpm install 安装依赖项(直接在项目文件夹路径下执行)
8、使用命令cnpm run dev启动项目,浏览器会打开 http://localhost:8080/#/ 看到以下效果

开发时属于热部署状态,代码保存后浏览器会自动刷新,错误提示也非常友好。
9、编译打包 cnpm run build
会编译打包到项目dist文件夹下,然后我们就可以部署到服务器上(注意:如果你直接打开index.html,可能页面会是一片空白,这是由于你引用的js路径有问题)

10、使用jQuery包
转自:http://www.cnblogs.com/pandabunny/p/5417938.html
从安装node js到构建一个vue并启动它的更多相关文章
- Vue.js:安装node js到构建一个vue并启动它
ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...
- 安装node.js、webpack、vue 和vue-cli 以及安装速度慢/不成功的解决方法
1.安装node.js 地址:https://nodejs.org/en/ 下载安装软件之后,点击下一步即可 打开dos窗口,输入cmd能快速打开,输入npm -v 和 node -v 能显示出版本 ...
- Windows10安装node.js,vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
- 构建微服务开发环境5————安装Node.js
[内容指引] 下载Node.js: Mac下安装Node.js: Windows下安装Node.js; 查看node和npm的版本. 一.下载Node.js 访问Node.js官网:https://n ...
- 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...
- 快速构建一个vue项目
首先介绍一下命令行构建一个vue项目步骤: 1.下载安装node.js(直接运行安装包根据步骤安装完),打开命令行输入:node -v ,出现版本号即安装成功. 2.命令行界面输入:cnpm inst ...
- [译]How to Install Node.js on Ubuntu 14.04 如何在ubuntu14.04上安装node.js
原文链接为 http://www.hostingadvice.com/how-to/install-nodejs-ubuntu-14-04/ 由作者Jacob Nicholson 发表于October ...
- Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识
目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...
- Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
随机推荐
- Python-ccs动画及阴影
动画及阴影 0. 什么时候该用什么布局 <!-- 定位布局: 以下两种布局不易解决的问题, 盒子需要脱离文档流处理 --> <!-- 浮动布局: 一般有block特性的盒子,水平排列 ...
- Ngnix日志分析
Ngnix日志分析 cat用来读取日志内容 grep进行匹配的文本搜索 wc则进行最终的统计 grep与命令格式: grep -E “a.*b” file,ab条件同时成立 grep或命令的格式为:g ...
- Lavarel - 模块间复用代码
代码复用在项目中早晚会遇到,这不在用 Laravel 给博客增加 Feed 订阅功能 就到了需要将生成网页 description 的函数提取出来,在文章显示与 Feed 生成的两个 Controll ...
- jquery----语法扩展(导入js文件)
简单使用 第一步,新建js文件 第二步,在js文件中添加 $.extend({ "GDP": function () { console.log("哈哈哈哈") ...
- web----Twisted
Twisted模块: Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如:网络协议.线程.数据库管理.网络操作.电子邮件等.
- (六)cxf处理一些Map等复杂类型
前面讲的一些都是简单类型,cxf都支持.但是有些复杂类型,cxf是不支持,比如常用的Map类型: 下面我们在前面的实例基础上在加一个方法,比如我们现在有个需求,获取所有用用户以及对应的每个用户所有角色 ...
- C/S权限系统(一)
父窗体的代码: 扩展Enter键相当于Tab键的思路: 1.创建 窗体的父类2.在父类中重写Form中的ProcessCmdKey方法,在相关控件上按回车键相当于按了Tab 键3.让窗体继承新建的窗体 ...
- Mac配置Node.js环境
打开终端输入命令:(安装brew) ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...
- vtiger自定上传图片的字段
废话不多说,上一篇有说到过vtiger新建模块的事 现在我新建了一个Score的模块,里面需要一个上传图片的功能 在Score界面新建一个字段叫grede 但是自定义类型里面是没有,图片这个选项的,只 ...
- python错误、调试、测试
1.错误, Python内置的try...except...finally用来处理错误十分方便.出错时,会分析错误信息并定位错误发生的代码位置才是最关键的. 程序也可以主动抛出错误,让调用者来处理相应 ...