1.Vue脚手架的基本用法
- Vue 脚手架用于快速生成Vue项目基本架构,网址为https://cli.vuejs.org/zh/
使用步骤
- 安装3.x版本的Vue脚手架
npm install -g @vue/cli
- 基于Vue3.x版本的脚手架创建Vue项目
//1.基于交互命令行的方式创建新版Vue项目
vue create my-project
//2.基于图形化界面的方式创建新版Vue项目
vue ui
//3.基于2.x的旧版本创建旧版Vue项目
npm install -g @vue/cli-init
vue init webpack my-project
2.Vue脚手架自定义配置
1.packag.js配置项目(不推荐)
例如
"vue": {
"devServer": {
"port": 8080,
"open": true
}
}
2.通过单独的配置文件配置项目(推荐)
- 在项目的根目录创建vue.config.js文件
- 在该文件中进行相关配置,从而覆盖默认配置
例如:
module.exports = {
devServer = {
open: true,
port: 8080
}
}
3.Element-UI的基本使用
Element-UI:一套为开发者、设计师和产品经理准备的基于Vue 2.0 的桌面端组件库
官网地址为:http://element-cn.eleme.io/#/zh-CN
1.基于命令行方式手动安装
- 安装依赖包 npm i element-ui -S
- 导入Element-UI相关资源
//导入组件库
import ElementUI from 'element-ui';
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件
Vue.use(ElementUI)
2.基于图形化界面自动安装
- 运行Vue ui命令,打开图形化界面
- 通过Vue项目管理器,进入具体项目配置面板
- 点击插件->添加插件,进入插件查询面板
- 搜索vue-cli-plugin-element并安装
- 配置插件,实现按需导入,从而减少打包后项目的体积