• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Vue.js开发环境快速搭建教程

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

作者:Eason_hoo 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Eason_hoo通过本文主要向大家介绍了vue.js开发环境搭建,vue.js开发app,vue.js开发,vue.js开发文档,vue.js开发实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

 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
</div>

2.安装Vue

## 全局安装 vue-cli##
sudo npm install -g vue-cli
</div>

这里写图片描述

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测试

</div>

这里写图片描述

4.安装Vue 依赖

##下载依赖##
sduo npm install
</div>

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

这里写图片描述

5.运行项目

##运行vue##
sudo npm run dev
</div>

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

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

同时也可以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.

</div>

注:运行时可以出现以下结果,原因是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

</div>

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

这里写图片描述

补充两种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组件学习教程进行学习。

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • vue.js开发环境搭建教程
  • Vue.js开发环境快速搭建教程
  • vue.js开发环境安装教程

相关文章

  • 2017-05-11BootStrapTable 单选及取值的实现方法
  • 2017-05-11jquery Ajax 全局调用封装实例详解
  • 2017-05-11Javascript之深入浅出prototype
  • 2017-05-11Bootstrap table 定制提示语的加载过程
  • 2017-05-11AngularJS中run方法的巧妙运用
  • 2017-05-11angularJS+requireJS实现controller及directive的按需加载示例
  • 2017-05-11SVG描边动画
  • 2017-05-11js实现功能比较全面的全选和多选
  • 2017-05-11原生js仿淘宝网商品放大镜效果
  • 2017-05-11JavaScript判断浏览器及其版本信息

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序 滚动到某个位置添加class效果实现代码
    • vuejs绑定class和style样式
    • js实现表格筛选功能
    • 微信小程序 MD5加密登录密码详解及实例代码
    • Bootstrap的popover(弹出框)2秒后定时消失的实现代码
    • jQuery中的on与bind绑定事件区别实例详解
    • JavaScript数据结构之广义表的定义与表示方法详解
    • VUE实现日历组件功能
    • javascript实现秒表计时器的制作方法
    • angular 动态组件类型详解(四种组件类型)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有