vue-cli开发项目基础教程---包括组件，router，vuex的使用方法

( 0 ). 先了解一下打包好的目录结构，明确各个组件或者是路由器或者是子组件应该放置在哪一个位置

node_ modules文件夹:存储了依赖的相关的包
public文件夹:任何放置在public文件夹的静态资源都会被简单的复制，而不经过webpack。你需要通过绝对路径来引用它们
一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
src文件夹:代码文件夹存项目源码
|----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)，会经过webpack处理
|----components文件夹: 存储项目中的自定义组件(小组件，公共组件)
|----views文件夹: 存储项目中的自定义组件(大组件，页面级组件，路由级别组件) ：如何区分大小组件呢（你可以利用F12的手机模式查看m.jd.com的页面，比如说导航栏，秒杀区，轮播图可以划分为小组件，那么他们底部对应的首页啊，分类啊，购物车啊就是一个大组件）
|----router文件夹:存储VueRouter相关文件
|----store文件夹: 存储Vuex相关文件
|----main.js:项目入口

( 1 ) 定义一个根组件文件App.vue，也就是我们通常的#app组件（定义在view文件夹里面）

1. 在App.vue的界面里，包含

• 结构代码template

   在结构代码里面写上#app的结构（相当于定义组件）
  

• 业务代码script

    在业务代码的export default对象里面，写上组件的名称name，数据和方法，子组件等等，你就参考组件构造器里的内容即可（这一步相当于注册组件）
  

• 样式代码

            注意，样式通常是全局通用的，如果想要仅适用于特定的组件，那么需要加上scoped属性
  

2. 回到main.js这个入口函数，导入根组件，并且通过render的替换渲染的模式导入到vue实例对象上去，注意还要写上el:#app

1.   import App from './views/App.vue'


 2.   new Vue({
      el: '#app',
      // 定义render：render:c=>c(组件名称)：前提是组价是有名字