Vue.js 学习入门:介绍及安装
Vue.js 是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
详细讲解内容可见:一句话理解Vue核心内容 (这块内容之后再做个阅读笔记:见《一句话理解Vue核心内容》阅读笔记
环境搭建
1.下载 nodejs(http://nodejs.cn);
node -v
终端查看安装成功npm -v
查看npm版本安装成功
2.安装 vue 命令:npm install vue
;安装vue脚手架 :npm install --global vue-cli
- vue脚手架(vue-cli) 可用于快速搭建大型单页应用。
使用 vue-cli 构建单页应用
//1、全局安装Vue-Cli
npm install -g vue-cli
//2、进入创建项目目录下
//3、创建使用webpack模板的Vue单页应用,Enter后根据提示完成项目的创建
vue init webpack projectname
//4、进入项目目录下
cd projectname
//5、下载项目引用的包
npm install
//6、运行项目
npm run dev
以上命令执行完后,在浏览器中输入http://localhost:8080/
出现vue的界面就是创建成功
Vue 的使用
如何在项目中使用vue;可以通过引用下载好的vue.js文件;也可以通过cdn形式引入
1.下载的vue.js 文件
//在html中引入vue的包文件
<script type="text/javascript" src="包文件地址/vue.js"></script>
新手最好引入vue.js有提示,vue.min.js是压缩版本
2.通过cdn形式
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
参考个人笔记:前端框架vue学习笔记:环境搭建
参考
Vue.js 学习入门:介绍及安装的更多相关文章
- Vue.js教程—1.介绍和安装
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定 ...
- Vue.js学习笔记(介绍)
Vue语法也可以进行APP开发,需要借助weex Vue.js是一套构建用户界面的框架,只关注视图层,便于与第三方库或既有项目整合. 在Vue中的核心概念:让用户不能操作Dom元素(减少不必要的dom ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- C# BackgroundWorker组件学习入门介绍
C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
随机推荐
- 利用MongoDB进行地理坐标查询
BS的应用在生活中已经非常常见,我们打车,叫外卖,查个地图之类的都会查询附近的相关坐标位置,mongodb提供了原生的二维地图查询,极大地方便了大家的开发. 假定我们有一个定义了位置信息的集合loca ...
- win10子系统ubuntu内的nginx启动问题
需用sudo启动,密码是windows密码.
- Selenium3+python自动化012-测试用例模块化
测试用例模块化特点:为po模型做准备. 1.提取公共方法. 2.提取数据. 3.提取逻辑. # @Author:lsj # @version V1.0 # -*- coding:UTF-8 -*- i ...
- python3运行调用htmltestrunner时,报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 0
之前解决过一次,又忘了,这次写下来了..百度没有的,跟我环境有关! 环境:自动化运行环境python3.6.5 上期说到了,写了一个bat来运行runallcase.py. 但是双击运行却报错:Uni ...
- Java单体应用 - 架构模式 - 02.MVC架构
原文地址:http://www.work100.net/training/monolithic-architecture-mvc.html 更多教程:光束云 - 免费课程 MVC架构 序号 文内章节 ...
- C# asp.net 配置文件连接sql 数据库
先引用 using System.Configuration;//配置文件using System.Data.SqlClient; 我这里使用的是SqlServer 2008 sa 用户 密码也为s ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 腾讯短链接url生成接口/腾讯短网址在线生成/新浪微博短链接生成器的分享
在通常情况下,URL是由系统生成的,通常包括URI路径,多个查询参数,可以对参数进行加密和解密. 当人们要分享某个URL,比如短信,邮件,社交媒体,这就需要短URL.而短网址,顾名思义就是在长度上比较 ...
- navicat操作mysql数据库
1.利用mysql来做ER图 1.1点击模型->新建模型->点击表->新建表,这样就可以了 1.2 建好的ER图->工具 有导出到sql ,有同步到数据库 1.3 建好的表,可 ...
- [P4549] 【模板】裴蜀定理 - GCD
__gcd真好用 #include <bits/stdc++.h> using namespace std; int main() { int n,x,a=0; cin>>n; ...