从零搭建vue-elementui前端

安装 vue-cli 脚手架

• 安装之前先删除

npm uninstall vue-cli -g

• 安装

npm i -g @vue/cli
npm i -g @vue/cli-init

使用npm 安装比较是比较慢，可以改为使用cmpn

• 验证安装版本

D:\jlite-report-font>vue -V
@vue/cli 4.5.11

使用vue-cli 构建工程结构

1. 创建目录

mkdir jlite-report-font
cd jlite-report-font

2. 执行init命令

vue init webpack jlite-report-font

执行的进程中需要确认输入:
工程名称
工程描述
作者
等等信息
完成后目录结构如下图:

目录结构.png

3. 安装依赖包

cnpm install

4. 运行项目

npm run dev

5. 访问welcome页面
   http://localhost:8080
   image.png

安装引入使用elementui

安装elementui

cnpm i element-ui -S

打开/src/main.js文件，引入element-ui

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})