VueJS教程:多种安装方法及运行环境设置

2018-09-2915:47:50WEB前端开发Comments2,112 views字数 978阅读模式

有很多方法来安装VueJS。 以下将讨论如何进行安装的一些方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

1. 使用 script 标签

这是一种比较简单的VueJS安装方便,只需要像引入其它.js 文件那样引入vuejs,参考以下代码 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>
HTML

注:vue.min.js 需要先下载到本地目录下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

在浏览器中打开VueJS的主页:http://vuejs.org/v2/guide/installation.html 并根据需要下载vue.js。目前有两个版本可以使用:生产版本和开发版本。 开发版本不是最小化,而生产版本是最小化,如下面的截图所示。 在项目开发过程中,开发版本将有助于警告和调试模式。
VueJS教程:多种安装方法及运行环境设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

2. 使用CDN

也可以从CDN库开始使用VueJS文件。 链接: http://unpkg.com/vue - 有提供最新版本的VueJS。VueJS也可以在jsDelivr( http://cdn.jsdelivr.net/npm/vue/dist/vue.js )和cdnjs(http://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js )。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

3. 使用NPM

对于使用VueJS的大规模应用程序,建议使用npm软件包进行安装。它提供了Browserify和Webpack以及其他必要的工具,可以帮助开发。 以下是使用npm进行安装的命令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

npm  install vue
Shell

4. 使用CLI命令行

VueJS还提供CLI来安装vue并开始服务器激活。 要使用CLI进行安装,需要安装使用以下命令完成的CLI。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

npm install --global vue-cli
Shell

VueJS教程:多种安装方法及运行环境设置
完成后,将显示VueJS的CLI版本。安装需要几分钟的时间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

+ vue-cli@2.8.2
added 965 packages in 355.414s
Shell

以下是使用Webpack创建项目的命令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

vue init webpack myproject
Shell

VueJS教程:多种安装方法及运行环境设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

要开始使用,请使用以下命令。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

cd myproject
npm install
npm run dev
Shell

VueJS教程:多种安装方法及运行环境设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

VueJS教程:多种安装方法及运行环境设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

当执行了npm run dev,它就会启动服务器,并提供显示的URL在浏览器中显示,如下图所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

VueJS教程:多种安装方法及运行环境设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5933.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/5933.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定