vue快速入门文档

该文档与视频教程关联，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，默认显示该说明

二、删除实例文件

1. 修改App.vue中如下

<template>
	<div id="app">
		<router-view />
	</div>
</template>

<style lang="scss">
</style>

2. 把components中的HelloWorld.vue删掉
3. 将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

4. 将views下的两个vue文件删除
5. 将assets中的logo.png删掉

三、 安装elementui

打开https://element.eleme.cn/#/zh-CN/component/installation，复制命令

npm i element-ui -S

安装完成后，在package.json中的dependencies下，会出现element-ui，否则未安装