npm(Node Package Managner)/MVC,MVVM,MVP的区别/ Vue中忽略的知识点！

按照顺序学习：

https://scotch.io/courses/build-an-online-shop-with-vue/hello-world

Vue Authentication And Route Handling Using Vue-router

Handling Authentication In Vue Using Vuex

---

NPM 套件管理工具

下载（内置了npm）：https://nodejs.org/en/   

npm是世界上最大的开源库生态系统ecosystem。

是 Node.js 的套件（package）管理工具， 類似 Perl 的 ppm 或 PHP 的 PEAR 等。安裝 npm 後，使用 npm install module_name 指令即可安裝新套件，維護管理套件的工作會更加輕鬆。

扫描二维码关注公众号，回复： 4505908 查看本文章

例子：

npm install -g vue-cli    #全局安装vue-cli

Node.js已经内建npm.

npm -v 查看版本。

npm help 查看帮助

npm help <command> 查看具体命令帮助

npm search <套件名字>， 例子：npm search coffee-script, 会在屏幕上显示结果列表。

npm install <套件名字>， 安装到当前目录下的node_modules文件夹内。

全局安装global:

npm install -g <套件名字>， 告诉npm这次安装在整个机器上，而不是当前的程序。

npm view <command | 包的名字>  , 查看注册信息。

npm view axios    //查看axios的最新信息

npm view npm,  查看npm的版本，dist ， 依赖列表,维护者邮箱，dist-tags（版本列表）

npm install -g npm 全局安装npm的最新版本。

npm install安装出错尝试的方法

拷贝项目到本地，cd进入目录， npm install安装报错或者卡住不动

1.确认下载源头是国内的（适用卡住不动的情况）

npm config list ,  查看自己的包的下载源，如果默认是官方改为淘宝的。

npm config set registry https://registry.npm.taobao.org

改回官网的地址：npm config set registry https://registry.npmjs.org/

2.清除缓存

使用npm cache clean --force清除缓存，并将安装失败的项目中的node_modules文件夹删除，重新npm install。

3.查看是否是node或者npm版本太老： node -v, npm -v

---

  

npm list | less ,  查看已经安装的套件。

然后使用:

/hello  ，回车后即可显示要找的内容。
n,    向下查找
N,   向上查找。
&/hello,  则列出包含hello的行。

---

Vue使用的就是mvvm框架

它和MVC, MVP的区别是什么？

mvc是最常用的软件架构，mvvm,mvp是它的衍生。

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

1. Mvc

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈

2. MVP

• 1. 各部分之间的通信，都是双向的。
• 2. View 与 Model 不发生联系，都通过 Presenter 传递。
• 3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

3. MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

---

webpack:

把依赖的modules，通过webpacke,转化为static assets。

简单来说就是一个module bundler模块打包工具。

它将一堆文件中的每个文件都作为一个module, 找出它们之间的dependancies , 将它们打包为可部署的静态资源。

可参考：https://vue-loader-v14.vuejs.org/zh-cn/

优点：大大优化前端工作流程。

缺点：配置麻烦。

Vue Loader

https://vue-loader-v14.vuejs.org/zh-cn/

Vue Loader是webpack的一个loader。它允许你以一种名为单文件组件的格式.vue写Vue组件，Vue Loader会把这个组件转化为JavaScript模块.

• 支持ES2015
• 允许Vue组件的组成部分使用其他的webpack loader,比如<style>使用Sass, 对<template>使用Pug;
• 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；???
• 为每个组件模拟出css 作用域。
• 在开发过程中使用热重载来保持状态。

 

Vue组件细节

.vue是自定义的文件类型，用类HTML语法描述一个Vue组件。它包括3种类型的顶级语言块<template>, <script>, <style>，还可以自定义块。

vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，module.exports 出一个 Vue.js 组件对象。

vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。(具体见预处理器章节)

<style lang="sass">
  /* write Sass! */
</style>

语言块

<template>

• 默认语言： html
• 内容被提取为string, 将编译并用作Vue组件的template选项。

<script>

• 默认语言: js(在检测到babel-loader会自动支持ES2015)
• 该脚本在类CommonJS环境中执行（就像通过webpack打包的正常js模块），因此可以require()其他依赖。如果支持ES2015, 还可以使用import和export语法。
• 脚本必须导出Vue.js组件对象。使用export default {...}

<style>

• 默认语言：css
• 一个单文件组件可以有多个<style>标签。

自定义块：

创建项目：

//也可以用yarn
npm install -g @vue/cli
vue create hello-vue    
cd hello-vue
npm run serve # 也可以用yarn serve


//安装好@vue/cli后，可以使用图形界面创建和管理
vue ui

---

❌：不知道怎么引起的，之前一直好好的！

✅ 更新node到最新版本(使用nvm下载最新版本，并使用nvm use <版本号>)

参考：https://github.com/vuejs/vue-cli/issues/889

cd ~/.vuerc

然后：useTaobaoRegistry: false.  还是不可以。(❌不是这里的问题)

node -v  //返回版本是8.9, 昨天我更新到11.00了，估计是非全局的更新。

首先，我更新了npm:

npm install -g npm

然后升级node.js

npm中有一个模块叫做“n”，专门用来管理node.js版本的。先安装它，然后使用它来更新node.

更新到最新的稳定版:

npm install -g n
sudo n stable

操，不管用啊！！！

还是参考博客：https://www.cnblogs.com/chentianwei/p/10090483.html

下载nvm, 然后nvm use <版本号 | stable > ✅ 

---

组件

组件描述了模版和逻辑之间的数据流动。数据从逻辑到模版， event emitted从template到logic:

• Vue Instance ----DATA----> Template
• Template ----EVENT-----> Vue Instance

Local vs Global组件

本地组件就是普通的js对象

const GreetingComponent = {
  template: `<h1>Hi, you</h1>`,  
}

new Vue({
   el: '#app',
   template: `
     <div><GreetingComponent/></div>
   ` ,
   components: { GreetingComponent}
})

//使用components选项来插入组件。

Global组件是使用Vue的component方法生成的。Vue.component( id, [definition] )

实际上

Vue.component("my-component", { ... }) 
//是简写。完全的代码：
Vue.component('my-component', Vue.extend({ /* ... */ }))

Vue.extend(options)是基础Vue构造器，创建一个子类。参数是组件选项的对象。

---

比较jQuery, vnalia JS, 和Vue的DOM操作

// jQuery
const divElement = $('#text');
divElement.text('Hello Vue')

// JavaScript
const divElement = document.getElementById('text');
const textNode = document.createTextNode('Hello Vue');

divElement.appendChild(textNode);

new Vue({
    template: `<div>{{text}}</div>`,
    data () {
        return {
            text: 'Hello Vue'
        };
    }
}).$mount('#app')

 template代表view, data代表model, 通过对象特性，它两被绑定在一起。

这就是MvvM设计风格！

模版template的几个概念：

• Interpolation: {{ }}, 也称为mustache tag。它把内部的数据渲染到view上。当数据变化，模版也会自动更新。这是mvvm的设计风格！
• Directives: 指令，客制化的HTML属性，可以用于绑定data到view和attributes。也可以绑定events.
  • v-bind指令是响应方式的，简写:xxx, 
  • v-on 用于绑定events, 简写@xxx
• 修改默认行为v-on:click.prevent="doThis"
• {{ }}内部可以执行计算，它是template expression.