视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
图文详解Vue.js开发环境快速搭建方法
2020-11-27 20:23:51 责编:小OO
文档
这篇文章主要为大家详细介绍了Vue.js开发环境快速搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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 安装 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编写好玩的拼图小游戏实例代码

使用require.js+vue开发微信上传图片组件方法

下载本文
显示全文
专题