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. 从浏览器地址栏中输入 控制台提示的访问路径