Vue脚手架

Vue脚手架

Vue脚手架基本用法

vue脚手架用于快速生成vue项目基本架构，官方网址

• 使用步骤

安装3.x版本的vue脚手架npm install -g @vue/cli

• 创建vue项目
  1. 基于交互式命令行的方式vue create my-project
  2. 基于图形化界面的方式vue ui

如果需要创建2.x版本的vue项目
安装npm install -g @vue/cli-init
创建项目vue init webpack my-project

vue脚手架生成项目的结构

入口文件为main.js

vue自定义配置

1. 通过package.json配置

   "vue":{
       "devServer":{
           "port":8888,
           "open":true
       }
   }
   1
   2
   3
   4
   5
   6

   不推荐这种方式，因为package.json主要用来管理包的配置信息，推荐将vue脚手架相关配置单独定义到vue.config.js配置中

2. 通过单独的配置文件

在项目根目录创建vue.config.js文件

module.exports={
	devServer:{
        open:true,
        port:8888
    }
}
1
2
3
4
5
6

Element-UI的使用

Element-UI为桌面端组件库

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)
   1
   2
   3
   4
   5
   6

2. 基于图形化界面自动安装

   • 运行vue ui命令，打开图形化界面
   • 通过Vue项目管理器，进入具体的项目配置面板
   • 点击插件-添加插件，进入插件查询面板
   • 搜索vue-cli-plugin-element并安装
   • 配置插件，实现按需导入