Vue 学习笔记

基本概念

1. node 简单的说 Node.js 就是运行在服务端的 JavaScript。

 node stript.js // 执行
 node -v  / -h

2. npm
   包管理器(Package Manager)
   npm 最初它只是被称为 Node Package Manager，用来作为Node.js的包管理器。但是随着其它构建工具(webpack、browserify)的发展，npm已经变成了 “the package manager for JavaScript”，它用来安装、管理和分享JavaScript包，同时会自动处理多个包之间的依赖。

npm -h /-v # 查看帮助和版本
npm install npm -g #升级现有npm版本
npm install <Module Name> #安装包
js 使用
var express = require('express');

npm install express          # 本地安装
npm install express -g   # 全局安装
npm install <packge> --save-dev devDependencies：仅在开发和测试环节中需要依赖的包。通过命令自动添加依赖到文件
npm uninstall <包名> #卸载

查看安装信息
npm list -g

如果要查看某个模块的版本号
npm list vue

使用 package.json
npm init #初始化

npm update <package> #可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
npm update <package> -g #可以把全局安装的对应命令行程序更新至最新版。

使用淘宝 NPM 镜像
npm install -g cnpm --registry=https://registry.npmmirror.com
npm config  set  registry=https://registry.npmmirror.com
npm config list  查看配置

npm 脚本运行
npm run 
package.json文件有一个scripts字段，可以用于指定脚本命令，供npm直接调用
"scripts": {
    "test": "echo  hello world",
    "start": "node index.js"
  },
  
  npm run命令会自动在环境变量$PATH添加node_modules/.bin目录，所以scripts字段里面调用命令时不用加上路径，这就避免了全局安装NPM模块。

4. vue

是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

单组件应用
有 v2.x 和v3.x 两个版本

5. vue-cli
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。
组合 vue-route vuex 等组件

有2 ， 3 4 5 等多个版本
不同版本的区别

安装
npm install -g @vue/cli
版本
vue --version
升级
npm update -g @vue/cli
创建项目 3版本以上
vue create hello-world
帮助
vue -h

使用图形化界面 3以上才有

vue ui
在现有项目中添加组件
vue add cli-plugin-eslint


在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

npm run serve # npm run vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
npm run build #npm run vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里

vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config

除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。 #3版本以上才有 vue.config.js

通过 vue create 创建的项目无需额外的配置就已经可以跑起来了。插件的设计也是可以相互共存的，所以绝大多数情况下，你只需要在交互式命令提示中选取需要的功能即可。

帮助文档