安装node.js

使用NPM方式安装VUE

创建VUE项目

启动VUE项目

打包VUE项目

安装node.js

参见：Node.js 安装配置 | 菜鸟教程

Node.js 安装包及源码下载地址为：Download | Node.js。

下载并安装对应操作系统的安装包。

安装完成后查看Node.js的版本：

>npm -v

8.3.1

使用NPM方式安装VUE

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本

$ npm -v

8.3.1

#升级 npm

cnpm install npm -g

# 升级或安装 cnpm

npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装，cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用：

# 最新稳定版

$ cnpm install vue@next

安装完后查看版本:

>vue --version

@vue/cli 5.0.1

创建VUE项目

vue init webpack projectName

projectName必须小写，例如：vue init webpack myproject

如果输入了包含大写字母的项目名，则将提示：Sorry, name can no longer contain capital letters.

完整示例：

vue init webpack ucd

'git' ��ڲ��ⲿ��Ҳ��ǿ��еĳ��

��ļ�

? Project name ucd

? Project description User Center Design

? Author Jason Zou

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch? Yes

? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "ucd".

# Installing project dependencies ...

# ========================

npm WARN deprecated

......

added 1825 packages, and audited 1826 packages in 1m

65 packages are looking for funding

run `npm fund` for details

140 vulnerabilities (10 low, 96 moderate, 28 high, 6 critical)

To address issues that do not require attention, run:

npm audit fix

To address all issues (including breaking changes), run:

npm audit fix --force

Run `npm audit` for details.

Running eslint --fix to comply with chosen preset rules...

# ========================

> ucd@1.0.0 lint

> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

# Project initialization finished!

# ========================

To get started:

cd ucd

npm run dev

Documentation can be found at Introduction · GitBook

启动VUE项目

E:\VUE_Project>cd ucd

E:\VUE_Project\ucd>cnpm run dev

> ucd@1.0.0 dev E:\VUE_Project\ucd

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:19396) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.

(Use `node --trace-deprecation ...` to show where the warning was created)

13% building modules 29/31 modules 2 active ...ndex=0!E:\VUE_Project\ucd\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

95% emitting

DONE Compiled successfully in 3003ms 19:08:42

I Your application is running here: http://localhost:8080

打包VUE项目

如果项目开发完成后，需要打包VUE项目部署到Web容器中，由于涉及反向代理，一般使用Nginx作为Web容器，可以很好地解决客户端跨域（由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。）调用服务端接口的问题。

进入项目所在目录，执行以下命令打包项目：

cnpm run build

E:\VUE_Project>cd ucd

E:\VUE_Project\ucd>cnpm run build

> ucd@1.0.0 build E:\VUE_Project\ucd

> node build/build.js

- building for production...(node:8128) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency

(Use `node --trace-warnings ...` to show where the warning was created)

(node:8128) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency

......

(node:8128) Warning: Accessing non-existent property 'which' of module exports inside circular dependency

Hash: 4ffb4c1f3b3914b6ca02

Version: webpack 3.12.0

Time: 6563ms

Asset Size Chunks Chunk Names

static/js/vendor.8aa87dd3c903ad781810.js 124 kB 0 [emitted] vendor

static/js/app.b22ce679862c47a75225.js 11.6 kB 1 [emitted] app

static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest

static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app

static/css/app.30790115300ab27614ce176899523b62.css.map 797 bytes [emitted]

static/js/vendor.8aa87dd3c903ad781810.js.map 627 kB 0 [emitted] vendor

static/js/app.b22ce679862c47a75225.js.map 22.2 kB 1 [emitted] app

static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest

index.html 505 bytes [emitted]

Build complete.

Tip: built files are meant to be served over an HTTP server.

Opening index.html over file:// won't work.

执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

如果直接双击打开 index.html，在浏览器中页面是空白的，要正常显示则需要修改下 index.html 文件中 js、css 文件路径或者将项目部署到Web容器（请参见：将打包好的VUE文件部署到Web容器（Nginx）中，解决接口调用跨域问题_chanbzou1981的博客-CSDN博客）中。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径：

...

我们把 js、css 文件路径修改为相对路径：

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

如何搭建VUE开发环境相关推荐

初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
168.Vue.js智能扫码点餐系统（二）【搭建Vue开发环境】2019.03.18
0.知识点搭建开发环境 1.搭建Vue开发环境 2.安装vue-cli脚手架安装命令 // 第一种: npm install --global vue-cli// 第二种 cnpm install ...
离线/内网环境下搭建vue开发环境
系列文章目录第一讲离线/内网环境下搭建vue开发环境第二讲内网环境运行maven项目目录外网环境搭建一.安装nodeJS 二.安装vue依赖包内网环境正式开始准备工作: 一.安装no ...
vscode搭建vue开发环境(vue入门)
本文基于vue2.0版本,文末说明怎么升级为vue3.0版本一.安装VScode 从官网下载,安装就行.以下操作在win+r -> cmd 命令行界面执行.在vscode中就是在创建好的项目空 ...
基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
Macbook搭建vue开发环境
一.Vue2.0推荐开发环境注:上面的图片转自Vue2.0 新手入门 - 从环境搭建到发布本人使用的各个工具的版本为: Homebrew 3.4.6 node.js v17.9.0 npm 8.5 ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
Vue2.x-03使用vue-cli搭建Vue开发环境
文章目录概述安装npm 安装vue-cli 建立工程 npm i安装脚手架项目的基本支持包 npm run dev运行由脚手架构建的基本 Vue.js 程序工程结构概述脚手架 vue-cli ...
vue 分模块打包脚手架_一步步从头搭建 Vue 开发环境
前言由于是工具,很可能你看到的时候有些工具包已经升级了,会有一些报错:这个你就需要自己探索了. 工具的版本 node: v10.16.0 npm: v6.9.0 babel: 7.5.5 webpa ...
webpack4 搭建 Vue 开发环境笔记
一.node 知识 __dirname: 获取当前文件所在路径,等同于 path.dirname(__filename) console.log(__dirname); // Prints: /Use ...

如何搭建VUE开发环境

安装node.js

使用NPM方式安装VUE

创建VUE项目

启动VUE项目

打包VUE项目

如何搭建VUE开发环境相关推荐

最新文章

热门文章