[Vue]---Vue脚手架与Element-UI的基本使用与配置

Vue脚手架

Vue脚手架的基本用法

Vue脚手架用于快速生成Vue项目基础架构

使用安装

• 安装3.x版本的Vue的脚手架：

npm install -g @vue/cli

• 基于版本的脚手架创建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脚手架生成的项目结构分析

脚手架的自定义配置

第一种方法（两种方法只能选一个）

通过修改配置package.json(不推荐，了解即可)

我们可以通过npm run serve运行文件，然后他会给我们生成一个地址，我们必须手动点击才能进入

为了方便，我们可以给他配置一些文件，让他自动进入

1.我们找到package.json文件，然后在下面编写

"vue": {
        "devServer": {
            "port": 8888,
            "open": true
        }
    }

2.然后通过npm run serve就可以运行了

第二种方法（两种方法只能选一个）

在根目录上创建vue.config.js文件进行配置

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

Element-UI的基本使用

官方网址

Element-UI : 一套为开发者、设计师和产品经理准备的基于vue 2.0的桌面端组件库。

• 基于命令行方式手动安装

  • 安装依赖包 npm i element-ui -S
  • 导入 Element-UI相关资源，在main.js文件下进行配置

  //导入组件库
  import ElementUI from 'element-ui' ;
  //导入组件相关样式
  import 'element-ui/lib/theme-chalk/index .css';
  //配置vue 插件
  Vue.use(ElementUI);
  

• 基于图形化界面自动安装

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