React项目的开始和扩展问题

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”

使用须知

文中举例，默认 yarn 是已经安装了，如果没有安装，请先运行以下命令安装后；

npm install yarn -g

开启项目

npx create-react-app xxx || yarn create react-app xxx
cd xxx
npm start

示例代码

入口文件 main.js
import 'es6-promise/auto'  //引入低版本兼容polyfill
import Vue from 'vue'      //引入vue
import router from './Router'  //对路由的放在一个文件里
import store from './vuex'   //将vuex放在一个文件里管理
Vue.config.productionTip=false  //阻止vue启动生产消息

const App=()=><router-view></router-view> //显示的是当前路由渲染的界面
new Vue({
    render: h=>h(App),  //render方法渲染
    router,
    store
}).$mount('#app')

路由集合 Router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 组件
import Home from  './components/Home.vue'
import Hello from './components/Hello.vue'
import Word from './components/Word.vue'
import Nofined from './components/Nofined'

const routes=[
  {path:'/',component:Home},
  {path:'/hello',component:Hello, //嵌套路由
    children:[
      {path:'word',component:Word},
    ]
  },
  {path:"*",component:Nofined} //404页面
]

const router=new VueRouter({
  routes
})
export default router

状态管理 vuex.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const moduleA = { // modulle管理
  state:{}, getters:{}, mutations:{}, actions:{},
}

const store = new Vuex.Store({ //以 Vuex.Store 方法创建实例 
  state:{ //状态
    name:"战争",
  },
  getters:{ //计算
    newName:state=>{
      state.name=="1"?return '21':return '11';
    }
  },
  mutations:{//事件 commit
    newName(state,data){ //设置名称
      state.name=data
    }
  },
  actions:{ //行为 dispatch
    newName:function(context,data){
      context.commit('newName',data)
    }
  },
  modules:{
    one:moduleA
  }
})
export default store

相关扩展

在项目中配置模块的相关目录

src/
 |——api/ (所有请求：用户相关，功能相关等)
   |——user.js 
 |——assets/ (静态资源：图片，视频，字体等)
   |——images/ 
 |——components/ (所有组件：主页，登录，注册等)
   |——Home.vue
 |——config/ (所有配置项：网关,路由字体大小等)
   |——geteway.js
   |——router.js
 |——store/  (Vuex的数据中心)
   |——index.js
 |——utils/  (工具集合：请求，常用函数等)
   |——require.js
 min.js

问题