Vue学习笔记65--常用插件安装指令

常用插件安装指令

1. 安装脚手架(学习笔记39)

   • 第一步：(仅第一次执行--新环境执行，创建过项目的话，从第二步开始)：全局安装@vue/cli (command line interface)

     查看镜像：npm config get registry

     安装钱建议先设置镜像==》npm config set register https://registry.npm.taobao.org
     npm install -g @vue/cli
     # OR
     yarn global add @vue/cli

     第二步：切换到你要创建项目的目录，然后使用命令创建项目

     vue create my-project

2. nanoid：用于生成唯一主键id(学习笔记62)

   • 第一步：npm install nanoid

     第二步：import { nanoid } from 'nanoid'

     第三步：id:nanoid(), //也可以指定生成字符串的长度，如nanoid(5)

3. uuid：用于生成唯一主键id(学习笔记62)

   • 第一步：npm install uuid

     第二步：import { v4 as uuidv4 } from 'uuid';

     第三步：this.uuid = uuidv4()

4. vuex(学习笔记56)

   • 第一步：安装，npm install vuex --save(注：vue2中，安装vuex 3版本；vue3中安装vuex 4版本。)

     即：vue2——npm i vuex@3、vue3——npm i vuex@4

     第二步：创建文件--src/store/index.js

     第三步：在main.js中创建vm时传入store配置项
5. axios(学习笔记58)

   • 第一步：安装--npm install axios --save

     第二步：引入--import axios from "axios"; 

     第三步：配置--vue.config.js

     第四步：使用
6. pubsub-js 消息订阅与发布(学习笔记53)
   • 第一步：安装支持库
     安装第三方支持库：pubsub.js(退出项目运行后执行以下命令，安装库文件)
     npm i pubsub-js 
     第二步：引入 + 订阅
     在需要数据的组件引入组件pubsub-js 
     import pubsub from 'pubsub-js';

     第三步：引入 + 发布

     // 引入消息订阅发布插件

     import pubsub from 'pubsub-js';
7. live server插件：vs code插件，用于运行项目
8. vue-router
   • npm install vue-router@3
9. eslint：代码规范，风格统一组件

   • npm install eslint prettier

10. bootstrap
    

    • npm install bootstrap

    • main.js 引入==》import 'bootstrap/dist/css/bootstrap.css'
    • 应用==》<button class="btn btn-primary">Click me</button>
11. Element UI(Vue学习笔记72--element ui)
    1. 卸载element-ui：npm uninstall element-ui
    2. 安装element-ui 指定版本：npm i element-ui@2.15.7
    3. 安装最新版本：npm i element-ui -S
    4. 按需引入需安装：npm install babel-plugin-component -D
12. npm i querystring -s
13. npm i normalize.css -s
14. npm i echarts -s
15. npm install less less-loader --save-dev