Vue
Vue 脚手架的基本用法
Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/
使用步骤
基于3.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
4.2 Vue 脚手架生成的项目结构分析
[外链图片转存失败(img-jKCDr3i3-1563500528031)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml117032\wps6.png)]
4.3 Vue 脚手架的自定义配置
1. 通过 package.json 配置项目(不推荐使用)
// 必须是符合规范的json语法
"vue": {
"devServer": {
"port": "8888",
"open" : true
}
},
#注意:不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息;为了方便维护,推荐将 vue 脚手架相关的配置,单独定义到 vue.config.js 配置文件中。
2. 通过单独的配置文件配置项目
① 在项目的跟目录创建文件 vue.config.js
② 在该文件中进行相关配置,从而覆盖默认配置
// vue.config.js
module.exports = {
devServer: {
port: 8888
}
}
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 并安装
通过 Vue 项目管理器,进入具体的项目配置面板
③ 点击 插件 -> 添加插件,进入插件查询面板
④ 搜索 vue-cli-plugin-element 并安装
⑤ 配置插件,实现按需导入,从而减少打包后项目的体积