Vue.js学习笔记(一、安装)

简介: Vue.js学习笔记(一、安装)

目录

简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装

独立版本

下载开发版本,文件名为vue.js:https://cn.vuejs.org/js/vue.js

下载完成后,像普通的js文件一样导入引用:

<script src="vue.js"></script>

这种方法用起来还是比较爽的,可以对数据实现双向绑定,可以应付一般的前后端分离,但是使用vue官方的脚手架创建单独的前端工程项目,可以做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式

使用 CDN 方法

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三个CDN地址:

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

*unpkg:*https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

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

NPM 方法

官方推荐——

用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

前提

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

# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
安装稳定版

新建一个目录vue_demo,在目录下执行npm命令,由于npm比较慢,所以使用了cnpm镜像。

# 最新稳定版
$ cnpm install vue

image.png

命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了  batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint  校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack vue_project
# 这里需要进行一些配置,默认回车即可

image.png

image.png

至此,一个vue-cli项目就创建完成了。

image.png

进入项目,安装并运行:

#安装
$ cnpm install
#运行
$ cnpm run dev

image.png

image.png

安装和运行完成。

访问地址:http://localhost:8080/#/

image.png

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

参考:

【1】、https://www.runoob.com/vue2/vue-install.html

【2】、https://vuejs.org/v2/guide/syntax.html

【3】、https://cn.vuejs.org/v2/guide/installation.html

【4】、https://cli.vuejs.org/


目录
打赏
0
0
0
0
21
分享
相关文章
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
54 1
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
43 2
2024年5月node.js安装(winmac系统)保姆级教程
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等