3 vue-cli 项目介绍

1 项目默认展示页面

src 》 App.vue 文件

 

2 项目结构（重点就在src）

build -- webpack打包使用的build依赖
config -- 项目配置
node_modules -- 管理项目中使用的依赖
src -- 书写vue源代码（重点）
    assets -- 存放静态资源（重点）
    components -- 用来书写vue组件（重点）
    router -- 配置路由（重点）
    App.vue -- 根组件（重点）
    main.js -- 项目主入口（重点）
static -- 其他静态
.babelrc -- 将es6语法转为es5运行
.editorconfig -- 项目编辑配置
.gitignore -- git版本控制忽略文件
.postcssrc.js -- 源码相关js
index.html -- 项目主页
package.json -- 类似于pom文件，依赖管理，不建议手动修改
package-lock.json -- 对package.json加锁
README.md -- 项目说明文件

 

3 vue-cli中项目开发方式

注：一切皆组件
一个组件包括：js、html、css

vue-cli开发一个个组件对应一个个功能，日后可以将多个组件组合成前端系统。
vue-cli开发的是一个个组件（xx.vue），打包时会将组件编译成运行的html文件

 

4 项目主入口（main.js）

import Vue from 'vue' -- 相当于在页面中引入vue.js
import App from './App' -- 引入src > App.vue组件
import router from './router' -- 引入vue router js（即：router>index.js）

Vue.config.productionTip = false -- 

/* eslint-disable no-new */
new Vue({ -- 全局实例
  el: '#app', -- 绑定vue实例的全局作用范围，index.html
  router, -- 注册路由对象
  components: { App }, -- 注册app组件
  template: '<App/>' -- 根实例模板（src> app.vue文件）
})

 

5 默认vue-cli展示分析

main.js -- 绑定app.vue文件（components: { App }）
app.vue -- 路由控制（<router-view/>表示用户输入路由匹配到的组件放在此处）
router 》 index.js -- 路由 （/路由指向HelloWorld组件）
components 》 HelloWorld.vue -- 就是页面显示的内容
HelloWorld.vue 包括：template、script、style

用户输入根目录：
http://localhost:8080，先找index.html，其中一个div的id=app；
main.js中，新建vue实例，并挂载了id=app的div，且组件为app.vue（components: { App }）；
app.vue中指定路由文件放置位置（<router-view/>）在img下边
从index.js文件中看到，根路由的路由文件为HelloWorld.vue文件，所以HelloWorld.vue文件内容显示在img下边

 

6 app.vue文件分析

<script>
export default { -- es6语法，表示暴露组件对象
  name: 'App' -- 名字跟文件名相同
}
</script>