• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

搭建VUE开发环境

武飞扬头像
chanbzou1981
帮助3

目录

安装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' �����ڲ����ⲿ���Ҳ���ǿ����еij���

�������ļ�

? 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(如果有图片的话)。

学新通

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

<link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.8aa87dd3c903ad781810.js></script><script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>

...

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

<link href=static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=static/js/vendor.8aa87dd3c903ad781810.js></script><script type=text/javascript src=static/js/app.b22ce679862c47a75225.js></script>...

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

这篇好文章是转载于:编程之路

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 编程之路
  • 本文地址: /boutique/detail/tanhhcjjci
系列文章
更多 icon
同类精品
更多 icon
继续加载