Vue.js开发环境快速搭建教程


Posted in Javascript onMarch 17, 2017

 Vue.js 现在在后端、前端、微信、移动端Web非常流行,今天简单模拟Vue.js快速安装;

1.安装npm

npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install
估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/

##安装npm##
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue.js开发环境快速搭建教程

2.安装Vue

## 全局安装 vue-cli##
sudo npm install -g vue-cli

Vue.js开发环境快速搭建教程

3.创建Vue 模板

## 创建一个基于 "webpack" 模板的新项目
sudo 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测试

Vue.js开发环境快速搭建教程

4.安装Vue 依赖

##下载依赖##
sduo npm install

在项目路径下多出的依赖包…

Vue.js开发环境快速搭建教程

5.运行项目

##运行vue##
sudo npm run dev

该命令可以项目下package.json 中找到…

"scripts": {
 "dev": "node build/dev-server.js",
 "build": "node build/build.js",
 "e2e": "node test/e2e/runner.js",
 "test": "npm run e2e"
 },

同时也可以Vue官网上找到… http://vuejs.org.cn/guide/installation.html#命令行工具

my-project eason$ sudo npm run dev
Password:

> btbu.edu_project@1.0.0 dev /Users/eason/my-project
> node build/dev-server.js

Listening at http://localhost:8080

webpack built afe85d235050b4bfe7d7 in 3096ms
Hash: afe85d235050b4bfe7d7
Version: webpack 1.13.2
Time: 3096ms
 Asset Size Chunks Chunk Names
 app.js 1.06 MB 0 [emitted] app
index.html 249 bytes [emitted]
Child html-webpack-plugin for "index.html":
 Asset Size Chunks Chunk Names
 index.html 21.5 kB 0
webpack: bundle is now VALID.

注:运行时可以出现以下结果,原因是npm install 依赖没有完全安装,需要再一次执行sudo npm install

node build/dev-server.js

module.js:341
 throw err;
 ^

Error: Cannot find module 'express'
 at Function.Module._resolveFilename (module.js:339:15)
 at Function.Module._load (module.js:290:25)
 at Module.require (module.js:367:17)
 at require (internal/module.js:16:19)
 at Object.<anonymous> (/Users/eason/my-project/build/dev-server.js:2:15)
 at Module._compile (module.js:413:34)
 at Object.Module._extensions..js (module.js:422:10)
 at Module.load (module.js:357:32)
 at Function.Module._load (module.js:314:12)
 at Function.Module.runMain (module.js:447:10)

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v5.6.0
npm ERR! npm v3.6.0
npm ERR! code ELIFECYCLE

运行成功监听在8080 端口..
Listening at http://localhost:8080
最后浏览器输入http://localhost:8080/ 看到以下界面说明安装成功了

Vue.js开发环境快速搭建教程

补充两种sublime text 对vue插件支持

1.Package Control 安装 https://packagecontrol.io/installation#st3

2.使用Prettify
   在Sublime Text中,按下Ctrl+Shift+P调出命令面板;
   输入install 调出 Install Package 选项并回车;
   输入pretty,并在列表中选择HTML-CSS-JS Prettify后回车即可安装

ps: 不是挺简单的, 动手试一试

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
原生js编写2048小游戏
Mar 17 #Javascript
vue.js开发环境安装教程
Mar 17 #Javascript
jquery 手势密码插件
Mar 17 #Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 #Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
js判断是否是手机页面
Mar 17 #Javascript
Angular组件化管理实现方法分析
Mar 17 #Javascript
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python可变参数用法实例分析
2017/04/02 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
PHP面试题附答案
2015/11/28 面试题
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
政治表现评语
2014/05/04 职场文书
护士实习求职信
2014/06/22 职场文书
群众路线对照检查材料
2014/09/22 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
社区服务活动报告
2015/02/05 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL