基于图形化界面创建项目步骤
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脚手架项目进行自定义配置的两种方式
- 脚手架帮助我们做了很多配置
- 程序员有时候需要自定义配置
- 自定义配置两种方式
-
通过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>
....
