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

 vue.js 现在在后端、前端、微信、移动端web非常流行，今天简单模拟vue.js快速安装；

1.安装npm

npm 是node.js 的包管理工具, 安装流程地址：
估计会非常慢，我们可以使用淘宝npm镜像下载安装：

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

2.安装vue

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

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

4.安装vue 依赖

##下载依赖##
sduo npm install

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

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/ 看到以下界面说明安装成功了

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

1.package control 安装

2.使用prettify
   在sublime text中，按下ctrl+shift+p调出命令面板;
   输入install 调出 install package 选项并回车;
   输入pretty，并在列表中选择html-css-js prettify后回车即可安装

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

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

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

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