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 odejs 加入系统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]AppDataLocalYarn目录下, 如果使用了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