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
    }
}

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

1. 通过单独的配置文件

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

module.exports={
    devServer:{
        open:true,
        port:8888
    }
}

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. 基于图形化界面自动安装

• 运行vue ui命令，打开图形化界面

• 通过Vue项目管理器，进入具体的项目配置面板

• 点击插件-添加插件，进入插件查询面板

• 搜索vue-cli-plugin-element并安装

• 配置插件，实现按需导入