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 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
Vue表单实例代码
Sep 05 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
基于mysql的论坛(6)
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
php常用的工具开发整理
2019/09/26 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
微信小程序自定义组件
2017/08/16 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Python字典底层实现原理详解
2019/12/18 Python
如何利用python读取micaps文件详解
2020/10/18 Python
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
优秀演讲稿范文
2013/12/29 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
服装设计专业自荐信
2014/06/17 职场文书
人生遥控器观后感
2015/06/11 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python