Vue.js 安装

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

 

  • Staticfile CDN(国内) : https://cdn.staticfile.net/vue/2.2.2/vue.min.js

    <div id="app">
      <p>{{ message }}</p>
    </div>
  • unpkg:https://unpkg.com/vue@2.6.14/dist/vue.min.js。

  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

 

3、NPM 方法

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

npm 版本需要大于 3.0,如果低于此版本需要升级它:

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装:

# 最新稳定版
$ cnpm install vue

命令行工具

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目,安装并运行:

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

 

注意:Vue.js 不支持 IE8 及其以下 IE 版本。 

Vue 项目打包 

打包 Vue 项目使用以下命令:

npm run build

 执行完成后,会在 Vue 项目下生成一个 dist 目录,一般包含 index.html 文件及 static 目录,static 目录包含了静态文件 js、css 以及图片目录 images。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/490082.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp开发H5页面如何打开调试 (vConsole)

前言&#xff1a; H5页面没有微信小程序那样的直接打开调试工具的功能&#xff0c;需要手动安装引用。步骤如下&#xff1a; 一、安装vConsole npm install vconsole 二、引用vConsole 在main.js文件中引入使用 import Vconsole from vconsole let vConsole new Vconsole()…

深度学习的发展历史(深度学习入门、学习指导)

目录 &#x1f3c0;前言 ⚽历史 第一代神经网络&#xff08;1958-1969&#xff09; 第二代神经网络&#xff08;1986-1998&#xff09; 统计学习方法的春天&#xff08;1986-2006&#xff09; 第三代神经网络——DL&#xff08;2006-至今&#xff09; &#x1f3d0;总结…

【MySQL】数据库--库操作

目录 一、创建数据库 二、打开数据库 三、修改数据库 四、显示数据库 五、删除数据库 六、备份与恢复数据库 1.备份&#xff1a; 2.恢复&#xff1a; 一、创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [,create_specification] …] [DEF…

原生数据开发软件 TablePlus for mac

一款非常好用的本地原生数据开发软件&#xff1a;TablePlus激活版。 软件下载&#xff1a;TablePlus for mac v3.11.0激活版 这款优秀的数据库编辑工具支持 MySQL、SQL Server、PostgreSQL 等多种数据库&#xff0c;具备备份、恢复、云同步等功能。它可以帮助您轻松编辑数据库中…

案例分享 | ESP32-C3+智能车库门应用方案 小尺寸低功耗

以前的车库门Opener只能通过墙壁开关或者遥控器来控制开启或关闭&#xff0c;超过一定距离的话无法通过遥控器来操控车库门&#xff0c;也无法随时查看车库门的状态&#xff0c;而启明云端智能车库门方案&#xff0c;可以通过手机APP远程控制车库门&#xff0c;实现远程开关门、…

Cadence——导出BOM清单

首先使用Allegro PCB Designer打开xxx .brd PCB制板文件 如下图&#xff0c;然后点击Tools–>Quick Reports&#xff0c;再选择Bill of Material Report或者Bill of Material Report(Condensed)&#xff0c;这两个的区别就是上面的导出的BOM物料清单中相同的器件是不会合并的…

基于“云”重构“百度云盘”

这一篇文章是和上一篇连着的哟&#xff01; # docker run -p 80:80 -d -v /data/owncloud/:/var/www/html owncloud 一、【安装完成】 二、【打开浏览器】 三、【回到这个熟悉的界面&#xff0c;掉。】 四、【上传文件】 试了可以看哇偶&#xff01;&#xff01;&#xff01…

四年创作,心路历程

四年创作&#xff0c;心路历程 前言初识收获日常憧憬 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 前言 今天打开csdn&#xff0c;发现官方发送了一条私信,原来我已经在计算机这…

分享 | 使用Virtuoso VCPVSR工具基于标准单元的布局布线流程

​ 本节内容 导览 一、准备工作 二、运行VCP前的配置 三、VCP的布局规划 四、VCP的自动摆放 五、VSR的自动绕线 分享使用Virtuoso GXL Custom Digital Placer(VCP) & Space-based Router(VSR)工具进行基于纯数字Standard-Cell布局布线的操作流程。 VCP&VSR演…

TCP(socket 套接字)编程 1

一、TCP套接字编程架构如下 二、相关代码实现 1、服务器端代码 package com.company;import java.io.IOException; import java.net.InetSocketAddress; import java.net.ServerSocket; import java.net.Socket;public class Main {public static void main(String[] args) {…

A Novel Negative Sample Generating Method for KnowledgeGraph Embedding

摘要 为了有效地提取知识图中的关系和原因&#xff0c;将实体和关系编码到一个连续的低维语义空间中。在负样本生成阶段&#xff0c;大多数知识图嵌入方法更注重替换头或尾实体以提高训练效率&#xff0c;很少替换关系。这些负样本生成方法对关系预测的贡献不大。本文提出了一…

《深入理解计算机系统》学习(4):过程(如函数)和栈存储

目录 过程1 运行时栈2 转移控制3 数据传送4 栈上局部存储 过程 过程中是软件中一种很重要的抽象&#xff0c;提供了一种封装代码的方式&#xff0c;用一组指定的参数和一个可选的返回值实现了某种功能。然后&#xff0c;可以在程序的不同的地方使用这个功能。设计良好的软件用…

FLUOR DE LYS® HDAC fluorometric activity assay kit组蛋白去乙酰化酶荧光活性检测试剂盒

FLUOR DE LYS HDAC fluorometric activity assay kit组蛋白去乙酰化酶荧光活性检测试剂盒 目前&#xff0c;组蛋白去乙酰化酶抑制剂已经显示出其作为抗肿瘤药物的前景&#xff0c;这也自然激发了研究者们对于筛选HDAC&#xff08;Histone deacetylase&#xff0c;组蛋白去乙酰化…

【AI】使用Azure OpenAI创建自己的AI应用!

【AI】使用Azure OpenAI创建自己的AI应用! 目录 【AI】使用Azure OpenAI创建自己的AI应用!创建工作区模型介绍部署模型API参数计算Token使用Python SDK调用补全模型调用对话模型流式调用异步调用提示技巧生成对话分类推荐超级课程: Docker快速入门到精通Kubernetes入门到大师…

超越Sora!StreamingT2V AI视频模型,轻松打造120秒视觉盛宴

近日&#xff0c;来自美国德克萨斯大学奥斯汀分校&#xff08;UT奥斯丁&#xff09;等机构的研究人员提出了一项名为StreamingT2V的AI视频生成技术&#xff0c;引起了业界的广泛关注。这项技术打破了传统视频生成的局限&#xff0c;实现了高度一致且长度可扩展的视频生成&#…

使用 nodejs + zx 编写脚本更新本地 hosts

在日常的开发和运维工作中&#xff0c;我们经常需要修改本地的 hosts 文件来实现一些特定的网络配置&#xff0c;比如将某个域名指向特定的 IP 地址。而使用 Node.js 结合 zx 工具可以让我们更轻松地编写和运行脚本来更新本地的 hosts 文件。 一、功能介绍 目标&#xff1a; 通…

黑马头条day5总结

1、surefire-reports for the individual test results. 借鉴&#xff1a;【已解决】surefire-reports for the individual test results.-CSDN博客 Please refer to D:\javashizhan01\heima-leadnews\heima-leadnews-service\heima-leadnews-article\target\surefire-report…

【jenkins+cmake+svn管理c++项目】Windows环境安装以及工具配置

一、目标和环境 目标&#xff1a;搭建一个jenkins环境&#xff0c;实现jenkins调用cmake和svn和VS编译c项目&#xff0c;并将生成的库上传svn。 环境&#xff1a;win10虚拟机&#xff08;练习流程用&#xff0c;正式用的话还是放到服务器&#xff09;&#xff0c;VS2017. 二、…

54、Qt/对话框、事件机制相关学习20240325

一、完善对话框&#xff0c;点击登录按钮&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#…

四大AI神器,助你开启智慧家居新生活

曾经&#xff0c;人工智能还只是科幻电影里的未来幻想&#xff0c;而今&#xff0c;它已悄然融入我们生活的方方面面。不再只是工厂里的自动化手臂&#xff0c;或是电影中的情感机器人&#xff0c;AI技术已经走进了寻常百姓家&#xff0c;让家居生活也焕发出智慧的光彩。 想象…