Jupiter开发SPA

• 在开发环境调试

  • 启动服务

    yarn dev
    

  • 页面路由

    • 一个例子

      假设jupiter项目的项目结构是

      src

      ​ pages

      ​ app.tsx

      ​ Front

      ​ About

      ​ index.tsx

    • 那么如果我们想要访问app.tsx的页面，需要进入localhost/app

    • 如果想要进入about页面，那么需要进入路由localhost/front/about

    • 如果路由不对，那么会进入404页面。

• 项目结构梳理

  • 常用组件

    • 常用组件可以放于src/components目录下。

    • 当需要在src/pages下的页面中import组件的时候，为了保证在不同设备上保持import的路径正确，需要配合配置alias使用。

      const path = require('path');
      module.exports = {
        source: {
          alias: {
            '@': path.resolve(__dirname,'src') //__dirname是配置文件的当前目录
          }
        }
      }
      

      上面的例子中，我们将src目录的绝对路径定义了一个别名 @。

• 项目开发常见问题

  • 内联引入SVG

    import { ReactComponent as Logo } from './logo.svg';
    
    const App = () => {
      return <Logo />;
    };
    

    内联引入SVG的方法实际上取决于loader。

  • 在项目中使用图片等静态资源

    import logoUrl from './logo.png';
    
    const App = () => {
      return <img src={logoUrl} />;
    };
    

    如果直接使用src=“URL”，那么打包的时候不会对url进行处理，就会导致无法访问到相应静态资源。