VUE2的前端学习笔记
名词笔记
Node
node.js 是一切的基础, 其他的名词都是基于这个运行的, 相当于一个JavaScript的容器或者虚机
NPM
安装node.js时赠送的包管理器, 类似于apt, yum, 以及java的maven, gradle, php的composer这类工具
YARN
用于解决实际项目中npm存在的问题, 在npm基础上包装并代替npm做项目的包管理, 确保同样的配置产出同样的node_modules
NVM
方便切换不同版本NodeJs的工具
安装
安装nvm
前往Github上的项目地址 , 下载 nvm-noinstall 版本, 解压到本地目录后, 运行目录下的install.cmd, 这里需要填入这个目录的路径. 这里有个bug, 第一次生成的settings不会保存, 再运行一次就会保存下来了. 然后再命令行下nvm --help 能看到命令列表. nvm会自动将自己, 以及c:\programe files\nodejs 加入系统PATH.
nvm命令说明
# 安装系统默认arch的node, 会连带安装npm
nvm install 12.16.2 # 安装yarn
npm install -g yarn # 启动 (在C:\Program Files下创建nodejs快捷方式)
nvm on # 停止 (在C:\Program Files下删除nodejs快捷方式)
nvm off # 查看可用的node版本
nvm list # 查看系统arch
nvm arch # 查看帮助
nvm --help
npm命令说明
# 查看配置, 如果需要显示默认配置, 后面加上 -l
npm config list # 将源设为淘宝仓库(全局)
npm config set registry https://registry.npm.taobao.org --global
# 将发布源也设为淘宝
npm config set disturl https://npm.taobao.org/dist --global # 在项目目录下, 根据packages.json初始化下载依赖到node_modules目录
npm install # 安装软件包, 带 -g/--global, --save-prod, --save-dev等选项
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range> # 删除软件包
npm uninstall [<@scope>/]<pkg>[@<version>]
yarn命令说明
如果是使用nvm安装的node, 每次运行前, 需要用nvm on命令启用, 否则命令行中没有yarn.
# 查看yarn配置
yarn config list
# 设置某项配置, 如果要设置为全局, 后面加上-g|--global
yarn config set <key> <value> [-g|--global]
# 读取某项配置
yarn config get <key>
# 删除某项配置
yarn config delete <key> # 查看当前环境node及依赖的版本信息
yarn versions # 全局 安装/列表/移除/升级 某个包
yarn global <add/list/remove/upgrade> [包名] # 命令行交互式创建 packages.json
yarn init # 将 packages.json中的依赖安装到local (当前项目的node_modules目录下)
yarn install # 查看包信息
yarn info <package>
# 指定版本的包信息
yarn info react@15.3.0
使用npm install还是yarn add的考虑
npm install后,会将包安装到 nodejs的安装目录下, 而 yarn 会将包安装到 C:\Users\[UserName]\AppData\Local\Yarn目录下, 如果使用了nvm进行nodejs版本管理, 那么yarn add之后的路径, 是不在nvm的管理之下的, 所以对于全局的包, 建议使用npm进行安装. 对应项目内部的包以及项目开发过程使用yarn进行管理.
结构分析
使用默认配置 vue-cli初始化
# 安装vue cli
npm install -g @vue/cli
# 创建新项目 vueapp
vue create vueapp
# 启动
yarn serve
# 编译
yarn build
目录结构
├─.git/
├─.gitignore
├─babel.config.js
├─package.json
├─README.md
├─yarn.lock
├─node_modules/
├─public/
│ favicon.ico
│ index.html
└─src/
│ App.vue
│ main.js
├─assets/
│ logo.png
└─components/
HelloWorld.vue
配置文件
babel.config.js
package.json
vue.config.js 这是一个可选的配置文件, 在vue cli3 之后webpack.config.js的功能被vue.config.js取代, 这里有一些配置是可以在package.json的vue字段中配置的.
程序入口: main.js
如果是单页面应用, main.js就在src目录下, 如果是多页面, 可能会在pages目录下的各个子目录里, 会有多个, 在main.js里会将Vue和项目的 .vue文件引入. 这个是页面进行初始化的地方, 这里引入的vue是根组件
import Vue from 'vue'
import App from './App.vue' Vue.config.productionTip = false new Vue({
render: h => h(App),
}).$mount('#app')
. 指定挂载点: 可以使用 Vue({el: '#app', ... }), 也可以使用 Vue(...).$mount('#app')
挂载点 public/index.html
在这里引入项目需要的css, 注意这边有应用挂载的根ID: <div id="app"></div>
Components组件, vue文件
应用是通过多个component组合而成, 这些component定义在各个vue文件中, 存在层级引用和复用的关系
vue文件的结构, 一般至少包含 <template>, <script>, <style>这三部分
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template> <script>
import HelloWorld from './components/HelloWorld.vue' export default {
name: 'App',
components: {
HelloWorld
}
}
</script> <style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
margin-top: 60px;
}
</style>
<template>
<template>是这个组件的模板, 其最外层必须只有一个<div>, 所有内容都放在这个div里面.
模板语法:
# 在标签外用 {{ }} 引用 vue 对象 data里面的内容, 这里会做html转义 # 在标签内用 v-html="expression" 来给标签的html赋值, 注意这个不会做html转义 # 在标签内用 v-for="item in list" 的方式循环, list是来源于vue的一个表达式或者数值 # 在标签内,用 v-on:click="dosomething" 或者 v-on:[method]="dosomething", 或者 @[method]="dosomething" 添加事件方法
- click可以用 once, prevent等修饰, 例如 :click.once, :click.prevent, 前者只触发一次, 后者会阻止原元素点击动作, 例如<a>的点击 # 在标签内用 v-bind:href="expression", 或者 v-bind:[expression1]="expression2" 或者 :[expression1]="expression2" 对属性赋值
<script>
在这里引入其他组件, 组织数据
data: 页面上直接引用的数据. 在被methods, computed下面的方法引用时, 可以直接用 this.[name]的形式引用.
methods: 在data数据发生变化时, methods下的每个方法都会被重新计算
computed: 在data数据发生变化时, 仅监控到变化的数据对应的方法会被重新计算
<style>
这里可以使用 <style scoped> 将式样仅仅应用在当前组件上.
细节记录
import时路径开头的@: 这个是Webpack resolve.alias 配置选项, 会将 @/ 替换为 src/ 目录
install.cmd
VUE2的前端学习笔记的更多相关文章
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- 前端学习笔记汇总(之merge方法)
学习笔记 关于Jquery的merge方法 话不多说,先上图 使用jquery时,其智能提示如上,大概意思就是合并first和second两个数组,得到的结果是first+(second去重后的结果) ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- web前端学习笔记:文本属性
今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...
- 前端学习笔记——移动前端UI选择
一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1.简 ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- 大前端学习笔记整理【七】HTTP协议以及http与https的区别
前言 还是老样子,新博客开始前总是想先啰嗦几句...HTTP协议其实在当初学习java时老师就有提过...但是...反正就那么过去了... 这段时间公司的项目正好要求做https的转换和迁移,然后自己 ...
随机推荐
- 问题--之前必须结合fn+f1,f2等才能调节音量,亮度,现在只按f1,f2就调节,导致快捷键冲突
1.问题 问题如上 2.解决方式 问题原因: 热键默认打开,用fn加上esc开启了热键的默认设置 解决: 再按一次fn加上esc关闭热键的默认设置
- 【C++】static 静态成员
静态成员 静态成员包括静态数据成员和静态成员函数,提供了同类对象间数据成员的共享机制 静态成员不是某个对象的成员,是类所有对象的共享成员,只建立一个成员副本 静态成员的定义与引用 定义格式:stati ...
- MySQL-多表查询练习
首先创建练习所需要的数据表 储备:建表操作: CREATE TABLE `t_dept` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `deptName` VARC ...
- [官网]微软服务器TLS的支持情况
https://learn.microsoft.com/en-us/windows/win32/secauthn/protocols-in-tls-ssl--schannel-ssp-#tls-pro ...
- [转帖]docker exec 失败问题排查之旅
https://plpan.github.io/docker-exec-%E5%A4%B1%E8%B4%A5%E9%97%AE%E9%A2%98%E6%8E%92%E6%9F%A5%E4%B9%8B% ...
- [转帖]为什么需要在脚本文件的开头加上#!/ bin / bash?
本文翻译自:Why do you need to put #!/bin/bash at the beginning of a script file? I have made Bash scripts ...
- [转帖]goproxy 使用说明
Go 版本要求 建议您使用 Go 1.13 及以上版本, 可以在这里下载最新的 Go 稳定版本. 配置 Goproxy 环境变量 Bash (Linux or macOS) export GOPROX ...
- [转帖]PostgreSQL数据加载工具之pg_bulkload
https://www.jianshu.com/p/b576207f2f3c 1. pg_bulkload介绍 PostgreSQL提供了一个copy命令的便利数据加载工具,copy命令源于Postg ...
- 简单监控Tomcat连接池大小的命令以及其他简单命令
while true ; do date && echo "当前数据库连接池大小为:" $(jmap -histo `jps |grep caf |awk '{pr ...
- 替换 &开头。;结尾之间的内容。用空格代替他们
替换 &开头.;结尾之间的内容.用空格代替他们 var regExp = /\&.*?\;/g; var str = '123&asdsa;dqwe'; str = str.r ...