01-搭建Vue +Element开发环境（mac）

想再element的table组建上，将table进行二次封装，于是就想着配置一个环境。思前想后，就直接使用vue cli脚手架吧。顺便记录下每一步遇到的问题，以及知识点。

1. 安装 vue cli脚手架

 npm install -g @vue/cli

执行后，出现error 错误信息如下：

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/local/lib

原因：

npm 安装权限问题

解决：

在安装命令前加上 sudo,即

sudo install -g @vue/cli

2.安装 element

npm i element-ui -S 

3. 项目中整个引入Element

main.js

import Vue from 'vue'//完整引入整个Elementimport ElementUI from 'element-ui'//注意：样式需要单独引入哦import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'//使用Vue.use()安装Vue插件Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount('#app')

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕。

涉及到的知识点记录

• npm 安装时 -S -D 的作用以及区别

  1. -S即 --save (保存) 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。
  2. -D即 --dev (生产) 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel ,sass-loader这些解析器。
  3. npm i module_name -D 就是npm i --save-dev 安装到开发环境，写入webpack.json的dependencies对象，如gulp babel webpack一般都是辅助工具
  4. npm i module_name -S 就是npm i --save 安装到生产环境，写入webpack.json的devDependencies，如vue react 等
  5. npm i module_name -g 全局安装
  6. dependencies中的模块或者插件，需要发布到生产环境，devDependencies里面的插件只用于开发环境，不用于生产环境

• cli (command line interface)

  cli (command line interface) 命令行界面：是指可在用户提示符下键入可执行指令的界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

• Vue.use(plugin)

  • Vue的API之一,用来安装vue.js插件。
  • 参数：对象或者函数
  • 该方法需要在new Vue()之前调用。