想再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 的作用以及区别
- -S即 --save (保存) 包名会被注册在package.json的dependencies里面,在生产环境下这个包的依赖依然存在。
- -D即 --dev (生产) 包名会被注册在package.json的devDependencies里面,仅在开发环境下存在的包用-D,如babel ,sass-loader这些解析器。
- npm i module_name -D 就是npm i --save-dev 安装到开发环境,写入webpack.json的dependencies对象,如gulp babel webpack一般都是辅助工具
- npm i module_name -S 就是npm i --save 安装到生产环境,写入webpack.json的devDependencies,如vue react 等
- npm i module_name -g 全局安装
- dependencies中的模块或者插件,需要发布到生产环境,devDependencies里面的插件只用于开发环境,不用于生产环境
cli (command line interface)
cli (command line interface) 命令行界面:是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。
Vue.use(plugin)
- Vue的API之一,用来安装vue.js插件。
- 参数:对象或者函数
- 该方法需要在new Vue()之前调用。