该文档与视频教程关联,b站搜索博主同名
一、 结构
-
node_modules 依赖
-
public 公共的目录
- favicon.ico 网页的图标
- index.html vue项目只有一个html(即只有一个页面【单页面】),所有的路由页面都是通过它来显示在浏览器
-
src 内部资源代码目录
- assets 静态资源,比如图片、css文件
- components 组件目录
- router 路由
- store 全局变量
- views 页面
- App.vue vue根页面(vue入口页面,全局页面)
- main.js vue入口js,vue的开始
-
babel.config.js 用来兼用浏览器版本的配置
-
package.json 项目的一些说明内容,比如项目名称,版本,执行命令,依赖,兼用等…
-
package-lock.json 确定依赖的范围,了解一下
-
README.md 项目MD说明,比如上传github,默认显示该说明
二、删除实例文件
- 修改App.vue中如下
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
</style>
- 把components中的
HelloWorld.vue
删掉 - 将router中的index.js修改为如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
- 将views下的两个vue文件删除
- 将assets中的logo.png删掉
三、 安装elementui
打开https://element.eleme.cn/#/zh-CN/component/installation,复制命令
npm i element-ui -S
安装完成后,在package.json中的dependencies下,会出现element-ui,否则未安装