新苡米
新苡米

脚手架基于图形化界面创建新版vue项目(element-ui组件库)

基于图形化界面创建项目步骤

1 执行命令：

#进入cmd
执行：vue ui

2 创建项目


image.png

3 选择目录


image.png

4 输入项目名称
image.png

5 配置选择


image.png

6 选择安装的功能
image.png
  • Linter/Formatter
  • 用ESLINT或Prettier检查和加强代码质量
  • 其实就是： 代码风格、格式校验
  • 注意：这个linter/Formatter 不要选择，选择之后对代码风格要求过于严格，写代码太费劲

7 配置项


image.png

lint 在保存时校验格式

8 保存配置信息


image.png

9 创建成功（看到项目管理界面）


image.png

10 项目管理器
image.png

11 任务


image.png
  • 其他的功能，大家可以自己点击看看
  • 可以在插件功能中管理插件
  • 可以在配置功能中进行配置

12 查看项目首页（点击上图中的：启动app，按钮进入）


image.png

13 说明：vue-cli脚手架是整合了webpack打包工具

package.json中默认有启动项目的命令
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
 之前的使用了webpack的项目的启动命令
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    "build": "webpack -p"
  },

分析项目结构

目录结构


image.png

真实目录


image.png
  • assets和public都是存放静态文件，习惯在assets中存放字体图标和图片
  • component：组件
  • views：视图代码
  • App.vue：根组件
  • main.js：打包入口文件
  • router.js：路由文件
  • eslintrc.js：eslint配置文件
  • .gitignore：git忽略文件
  • babel.config.js：babel配置文件
  • package.json：包管理配置文件
  • postcss.config.js：postcss配置文件

问题：大家在新建项目之后，会发现没有router.js文件，而是有一个router文件夹，下边有一个index.js。这是因为vue和vue-router的版本不一致的原因

对vue脚手架项目进行自定义配置的两种方式

  • 脚手架帮助我们做了很多配置
  • 程序员有时候需要自定义配置
  • 自定义配置两种方式

  1. 通过package.json配置项目（port端口，open打包完成之后自动打开浏览器）（不推荐方式）


    image.png

2 单独配置文件配置项目（推荐方式）（意思就是要将自定义的配置要单独存放）


image.png

介绍element-ui并基于命令行方式手动安装

介绍

Element-UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库
官网：https://element.eleme.cn/#/zh-CN

Element-UI提供了丰富的组件，设计非常美观，我们可以直接拿来用，这样可以省去很多样式编写时间，让我们更加专注逻辑代码

image.png
  • 将导入的ElementUI安装到Vue中，这样Vue才可以使用Element-UI
  • 上述代码，写到打包入口文件：main.js
#main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 手动配置 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

#App.vue

效果：


image.png

基于图形化界面自动安装element-ui

image.png

打开图形化界面之后，创建项目，然后选择之前的配置模板


image.png

进入插件---添加插件，然后搜索，进行安装


image.png

选中vue-cli-plugin-element(单击即可)，然后点击右下角安装
安装成功之后，出现如下配置界面
image.png
  • import on demand：按需导入

  • demand：要求
    文件改动（直接点击继续）


    image.png

    安装成功


    image.png

    通过vscode打开项目
    image.png

main.js中导入了element.js（自动生成代码）

import './plugins/element.js'

element.js中导入了Element-UI（自动生成代码）

import Vue from 'vue'
import { Button,Row } from 'element-ui'

Vue.use(Button)
Vue.use(Row)

App.vue中添加Element-UI代码（自己添加）