vue 核心笔记

[amenzai]

vue 核心技术

重点内容：

• 技术难点
• vue 项目开发
• vue + webpack 工程流搭建
• vue + vue-router + vuex 项目架构
• vue 服务器渲染深度集成

webpack4 升级：

• 版本变化
• 配置变化
• 插件变化

具体实施：

1. npm uninstall webpack webpack-dev-server webpack-merge -D
2. npm i webpack webpack-dev-server webpack-merge webpack-cli -D
3. 安装好会看到一些包对应需要升级，找出来
4. npm uninstall babel-loader extract-text-webpack-plugin html-webpack-plugin file-loader eslint-loader -D
5. npm i babel-loader extract-text-webpack-plugin html-webpack-plugin file-loader eslint-loader -D
6. 如果此时有不满足版本的，可以这样 npm i extract-text-webpack-plugin@next -D
7. 配置改完后，运行遇到报错时，将对应包升级即可

对于一个框架要搞清楚一些内容：

• 原理
• 主要解决了什么问题
• 主要API
• 编程思想

vue 核心API

详情查看

[amenzai]

vue 组件库引入对比

elementUI

// 全部引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 按需引入
import { Button, Select } from 'element-ui';
// 插件配置示例
Vue.use(Button);
Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

按需引入：

npm install babel-plugin-component -D

// .babelrc
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

vux

// 使用插件
import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Alert'
or
import { AlertPlugin, ToastPlugin } from 'vux'

// 使用组件
import { Group, Cell } from 'vux'

vant

// 全部引入
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';

// 按需引入
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
or 
import { Button } from 'vant';

[amenzai]

pm2 start pm2.yml --env production
pm2 restart vue-todo
pm2 stop vue-todo
pm2 list
pm2 log vue-todo

pm2.yml

apps:
  - script: ./server/server.js
    name: vue-todo
    env_production:
      NODE_ENV: production
      HOST: localhost
      PORT: 8888