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

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
<template>
  <div id="app">
    <!--增加如下代码，从Element-UI随便copy一些点代码（组件-Button中找如下代码）-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

效果：

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代码（自己添加）

<template>
  <div id="app">
    <!--添加如下代码-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
   ....