五、伊森商城 前端基础-Vue Vue脚手架原理与使用 p27

目录

Vue项目结构 

一、使用vue脚手架进行模块化开发

1、main文件

1.1、首先new Vue创建了一个vue实例，这个实例挂载了index.html中的app元素

1.2、使用了路由，这个路由是简写的写法

 1.3、components使用了一个组件叫App

1.4、最终渲染

2、App.vue组件

2.1、首先template就是模板，我们的页面要显示成什么

 2.2、script就是我们vue实例的代码

2.3、style样式

2.4、 App.vue解析

3、router路由  

4、新增路由配置

4.1新建hello.vue组件

 4.2、编写路由

4.3、保存运行再测试

5、动态导航

调用逻辑

---

Vue项目结构 

- build：存放跟打包工具webpack之类有关的代码

- config：存放配置信息的文件夹（index端口配置）

- node_modules：存放当前项目所有依赖的文件夹（没有的话可以npm install）

- src 编写代码的文件夹

- static 静态文件夹（可以存放图片之类的）

- .babelrc 语法转义的相关配置

- index.html 主入口页面，首页内容

- package.json 便是npm依赖包的配置信息（每安装一个依赖里面都会声明好）

- package-lock.json 每一个依赖的详细信息（包括去哪里下载，版本号之类的）

一、使用vue脚手架进行模块化开发

1、main文件

再src中有一个非常重要的文件，叫main.js，这个就是我们的主程序

1.1、首先new Vue创建了一个vue实例，这个实例挂载了index.html中的app元素

 

1.2、使用了路由，这个路由是简写的写法

 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// ./就是同级目录下，router文件夹下的内容
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
// 首先创建了一个vue实例，这个实例挂载了index.html中的app元素
new Vue({
  el: '#app',
  // 页面的跳转按照这个规则来的，冒号后面的router就是头顶中import router from './router'导入的
  router: router,
  components: { App },
  template: ''
})

 router.index.js

router文件夹下有一个文件index.js

里面使用export default导出了一个组件，而且是默认导出，导入的时候可以起名

 1.3、components使用了一个组件叫App

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

// 从同级目录导入App.vue
import App from './App'
// ./就是同级目录下，router文件夹下的内容
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
// 首先创建了一个vue实例，这个实例挂载了index.html中的app元素
new Vue({
  el: '#app',
  // 页面的跳转按照这个规则来的，冒号后面的router就是头顶中import router from './router'导入的
  router: router,
  // 使用了一个组件叫App，也是上面导入进来的import App from './App'
  // 这里也是简写写法，未简写就是 App: App
  // 属性名跟属性值的变量名一样的时候可以简写
  components: { App },
  template: ''
})

import App from './App'。// 从同级目录导入App.vue中的App.vue，里面的这个组件叫做单文件组件

1.4、最终渲染

main.js 中使用template指定了一个模板，模板使用了这个组件。

这个长什么样。我们最终index.html中的app元素就长什么样。

2、App.vue组件

这个组件分成三个部分