如何搭建VUE开发环境

搭建VUE开发环境安装node.js参见：Node.js 安装配置 | 菜鸟教程Node.js 安装包及源码下载地址为：Download | Node.js。下载并安装对应操作系统的安装包。安装完成后查看Node.js的版本：>npm -v8.3.1使用NPM方式安装VUEnpm 版本需要大于 3.0，如果低于此版本需要升级它：# 查看版本$ npm -v8.3.1#升级 npmcnpm i

chanbzou1981

7685人浏览 · 2022-02-19 20:44:06

chanbzou1981 · 2022-02-19 20:44:06 发布

安装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 文件就可以在浏览器中看到效果了。