通过对《零基础学前端系列教程 | 和前端谈恋爱的第001–006天》的学习，我们已经基本掌握了HTML的核心标签，CSS的常见样式，对 Javascript 也略有接触。
- 零基础学前端系列教程 | 和前端谈恋爱的第001天——你好，前端
- 零基础学前端系列教程 | 和前端谈恋爱的第002天——约会邀请
- 零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
- 零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮
- 零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单
- 零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好
但真实开发中，应快速开发大型复杂项目的需求，我们会使用 Vue 框架 和 Element UI 组件库，具体它们有多么方便和强大，在后续实战开发中慢慢体会吧！
争取在 100 步之内，搞定它们，一起加油吧！
下面立马开始第01步 —— 搭建开发环境
下载安装 vscode
下载安装 node.js
搭建 Vue 开发环境
创建 Vue 项目
在要创建项目的文件夹中，鼠标右键快捷菜单打开终端
输入下方命令，按 Enter 键（简称：回车）
vue create ccweb
按向下的方向键 ↓ ，将 > 光标调整到 Manually select features 处回车
按向下的方向键 ↓ ，将 > 光标调整到 Router 处按空格键，实现选中的加 * 效果
继续按向下的方向键 ↓ ，将 > 光标调整到 Vuex 处按空格键，加 * 选中后回车
直接回车
输入 n 回车
直接回车
直接回车
按向下的方向键 ↓ ，将 > 光标调整到 In package.json 处回车
最后输入 n 回车即可，最终效果如下图：
安装 Element UI 组件库
使用 vscode 打开文件夹 ccweb，新建终端
在终端输入下方命令后回车
vue add element
- 选择
Fully import 回车（默认已选中，直接回车） - 输入 n 回车
- 选择
zh-CN 回车（默认已选中，直接回车）
修改默认文件
经过以上各安装步骤，已完成了项目的基础搭建，但有很多以后用不到的默认生成的文件可以清理掉，按下述步骤操作即可：
- 删除以下文件
src\assets\logo.png
src\components\HelloWorld.vue
src\views\About.vue
src\views\Home.vue - 将 src\App.vue 修改为
<template>
<div id="app">
<el-collapse-transition>
<router-view></router-view>
</el-collapse-transition>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
- 新建文件 src\views\index\index.vue，内容为
<template>
<div>首页</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
- 新建文件 src\views\otherPages\404.vue，内容为
<template>
<div>404 - 请求的页面不存在、已被删除或无法访问</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
- 将 src\router\index.js 修改为
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "首页",
component: (resolve) => require(["@/views/index/index.vue"], resolve),
},
// 404 表示请求的页面不存在、已被删除或无法访问
{
path: "/404",
component: (resolve) => require(["@/views/otherPages/404.vue"], resolve),
},
// 未匹配到的路由，重定向到 /404
{ path: "*", redirect: "/404" },
];
const router = new VueRouter({
routes,
});
export default router;
启动项目
方式一：点击 vscode 的NPM脚本面板中的启动按钮
方式二：在终端中执行命令
npm run serve
显示最终的项目运行地址，则表示项目启动成功！
访问项目
方式一：按住 Ctrl 单击项目地址
方式二：打开浏览器，地址栏中输入下方网址后回车
http://localhost:8080/#/
效果如下：
若访问其他地址，如
http://localhost:8080/#/404
可见网页的内容随网址的变化而变化
若输入其他在 src\router\index.js 中没有定义的路由（即网址），如
http://localhost:8080/#/login
则网址会迅速自动变化为 http://localhost:8080/#/404 ，因为我们进行了路由自适配，当访问未定义的路由时，就会自动跳转到 http://localhost:8080/#/404。
其核心代码为 src\router\index.js 中的：
// 404 表示请求的页面不存在、已被删除或无法访问
{
path: "/404",
component: (resolve) => require(["@/views/otherPages/404.vue"], resolve),
},
// 未匹配到的路由，重定向到 /404
{ path: "*", redirect: "/404" },
这是 vue 插件 vue-router 的语法，现在简单了解即可，以后会慢慢详细讲解哈！
有基础的朋友，可以点击下方链接，先睹为快！
- Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、
router、路由过渡动画等