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
