vue-cli和element UI的安装步骤

vue-cli和element UI的安装步骤

下载vue脚手架
Vue 脚手架的基本用法
Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/
1.安装 3.x 版本(3.0版本以上)的 Vue 脚手架：
使用步骤
npm install -g @vue/cli
2.安装3.0版本以下的Vue脚手架
npm install -g vue/cli

基于3.X版本的脚手架创建vue项目
基于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

vue脚手架的自定义配置
1.通过 package.json 配置项目
// 必须是符合规范的json语法
“vue”: {

“devServer”: {

“port”: “8888”,

“open” : true

}

},
注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

2.通过单独的配置文件配置项目

// vue.config.js

module.exports = {

devServer: {

port: 8888
open: true

}

}
① 在项目的跟目录创建文件 vue.config.js
② 在该文件中进行相关配置，从而覆盖默认配置
都是需要使用cnpm run serve启动
第二个会比较简单

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-cli和element UI的安装步骤的全部内容，希望文章能够帮你解决vue-cli和element UI的安装步骤所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。