jsd-2306-vue-01: 教学项目教学项目教学项目教学项目教学项目
2306-vue-baking-teacher: 教学项目教学项目教学项目教学项目
一、脚手架工程中使用富文本编辑器wangEditor
1.通过以下命令 安装wangEditor
npm i wangeditor -S
2.在main.js文件中添加以下配置信息
//引入wangEditor
import wangEditor from "wangeditor";
//给Vue添加一个全局属性, 之后可以通过this.$wangEditor访问到此属性
Vue.prototype.wangEditor = wangEditor;
3.在需要显示富文本编辑器的位置添加一个div
4.在script标签中进行初始化操作
//页面元素加载完成并且Vve框架和元素挂载完成后调用的方法
//通常在此处做一些初始化操作，比如富文本编辑器初始化，或者发请求的代码
//初始化富文本编辑器
二、脚手架工程中如何使用ElementUI
1. 在终端中执行以下指令 在终端中显示added 9 packages in 10s 说明安装完成
npm install --save element-ui
2. 在工程的main.js中 导入并使用ElementUI:
3.可以在*.vue页面中按照以前的方式使用ElementUI框架了
练习：
三、综合练习：
1. 停止之前的工程, 创建vue-project-01工程
2. 通过idea打开工程并启动
3. 把App.vue里面的无用代码删除, 主要留下<router-view/>
4. 创建RegView.vue , 在router/index.js中进行配置 , 因为此组件是显示在主routerview里面的所以配置路由时配置在第一层级
5. 创建LoginView.vue , 在router/index.js中进行配置 , 因为此组件是显示在主routerview里面的所以配置路由时配置在第一层级
6. 使用HomeView作为首页, 删除页面中的无用代码,并添加以下代码
<template>
<div class="home">
<header>
<h1>头部区域</h1>
</header>
<main>
<router-view/>
</main>
<footer>
<h1>底部区域</h1>
</footer>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
7. 因为在首页和详情页需要公用同一份头和脚 所以在HomeView的中间区域使用了router-view, 创建views/home/IndexView.vue 用于展示进入到首页时显示的中间区域
8. 在路由index.js中进行配置, 因为IndexView是显示在HomeView里面router-view的内容,需要进行路由嵌套,在配置HomeView的位置添加children
如下图: 里面的redirect用于向根路径发请求时重定向到/index
9.创建views/home/DetailView.vue文件, 用于显示详情内容, 此页面和首页公用同一份头和脚, 所以需要将此组件显示在HomeView的router-view中
10.配置路由, 配置方式和IndexView一样,配置在第二层级的位置
四、工程结构：
- App.vue: 此Vue文件是访问工程根路径时自动显示的组件
- views文件夹: 以后开发的所有"页面"(*.vue) 基本都保存在此文件夹下
- router/index.js: 路由配置文件, 在里面配置客户端请求xxx地址时由xxx.vue显示
- main.js: 工程的主JS文件, 引入各个框架的代码写在此文件中
- Package.json: 修改端口号, 修改框架版本在此配置文件中操作
- public文件夹: 图片资源文件保存在此文件夹下
五、修改端口：
- 在package.json文件中添加以下内容
六、启动Vue脚手架工程步骤
1. 进入到工程的根目录下
d: 回车 从其它盘进入到d盘
cd vue-workspace 回车
cd vue-project-01 回车
2. 执行启动服务的命令
npm run serve 回车
3. 从浏览器地址栏中输入 控制台提示的访问路径
