Vue脚手架框架说明_day10

1.京淘项目搭建

1.1打开项目

说明由于脚手架其中需要编辑HTML/CSS/JS 所以需要利用Hbuilder进行打开.

1.2什么是脚手架

原来写前端代码时 需要自己手动维护html/css/js. 并且如果文件如果很多 缺乏一种统一的方式进行管理.
可以向后端代码一样Controller/Service/Mapper 将代码进行分层管理. 前端仿照后端 开发了一个脚手架项目结构.

1.2.1 脚手架结构分析

1.2.2 正确理解.vue文件

知识复习:

1. 组件 HTML/CSS/JS 这些都可以封装到组件中.
2. ** 重点:在脚手架中 xxx.vue 代表一个组件 **
   

1.2.3 正确理解main.js文件

作用:
1.导入整个项目所需要的js文件
2.实例化vue对象
3.通过实例化vue对象进行程序渲染

1.2.3.1 引入组件/插件/js

// 1.引入插件/css/jc
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'
/* 导入富文本编辑器对应的样式 */
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
/* 导入axios包 */
import axios from 'axios'

1.2.3.2 环境设定

// 2.配置默认值
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8091/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象
Vue.prototype 定义全局变量命名为 $http */
Vue.prototype.$http = axios
Vue.config.productionTip = false
/* 定义过滤器 */
Vue.filter("priceFormat",function(price){
    return (price / 100).toFixed(2)
})

1.2.3.3 实例化Vue对象

/* 将富文本编辑器注册为全局可用的组件 */
Vue.use(VueQuillEditor)
// 3.初始化vue对象
//需要Vue对象进行挂载
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1.2.4 脚手架中的路由规则

1.路由占位符位置
说明: 根据用户路由地址之后在该区域展现组件信息.

2.路由策略

1.2.5 脚手架加载流程

1.2.6 加载流程案例

需求: 要求用户访问"/elementUI" 访问 ElementUI的组件.
1.定义ElementUI组件

2.导入路由组件,定义路由机制

3.访问组件