cli搭建多页面使用时对品种组织和安插的调动,搭建多少个框架ca88会员登录中心

ca88会员登录中心 16
ca88会员登录中心

即便品类已经运维,不过在项目目录里是找不到webpack配备项的。举例,大家想布置less、配置alias小名,那时我们要求做一个操作:张开项目(eject)[
注:这么些贰个不可逆进程,一旦你施行了,就无法回到起头化 ] 。

其次步、对项目目录结构举行调解

重大是对src目录调治,调治前的品种目录结构:

ca88会员登录中心 1

image.png

其三步、对相应的配置文件进行改换

  • 先是步向build文件夹下的utils文件中开展改变
在utils文件中添加两个函数

// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
    // 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
    // 用于做相应的merge处理
var merge = require('webpack-merge')


//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在
// 那么就作为入口处理
exports.entries = function() {
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        map[filename] = filePath
    })
    return map
}

//多页面输出配置
// 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中
exports.htmlPlugin = function() {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
    let arr = []
    entryHtml.forEach((filePath) => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let conf = {
            // 模板来源
            template: filePath,
            // 文件名称
            filename: filename + '.html',
            // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
            chunks: ['manifest', 'vendor', filename],
            inject: true
        }
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                },
                chunksSortMode: 'dependency'
            })
        }
        arr.push(new HtmlWebpackPlugin(conf))
    })
    return arr
}
  • 修改build/webpack.base.conf.js的输入配置
找到这一段,并且修改为
  • 修改build/webpack.dev.conf.js(开采遭遇)和build/webpack.prod.conf.js(生产条件)的多页面配置
    1.开辟条件build/webpack.dev.conf.js
找到该段并且注释掉,然后在后面添加`.concat(utils.htmlPlugin())`  


2.生产环境webpack.prod.conf.js  


注释掉这段,并且在后面添加`.concat(utils.htmlPlugin())`  

工具会帮您初叶化三个粗略基本的花色同有的时候间会自行帮你安装项目所急需的各样信任

率先步:安装vue-cli并且进行发轫化

在地头新建贰个文书夹作为项目,走入该公文夹,按下键盘shift+鼠标右键,在进展的美食做法选择’在此地张开命令窗口‘。
大局安装vue-cli:

npm i vue-cli -g

抑或应用Taobao镜像:

cnpm i vue-cli -g

设置实现后开头化项目

vue init webpack

之后在模板下载时候会弹出如下配置选项

ca88会员登录中心 2

image.png

布局好后按回车等待安装依赖完毕

附章:关于多页面输出配置函数中的chunks: [‘manifest’, ‘vendor’, filename]

第一个vendor模块是指node_modules中的功能模块
第二个manifest是指针对vendor模块所做的缓存

github链接请点

 yarn eject // 或者 npm run eject
删去以下不要求的文件

最外层的index.html,
assets目录下的logo.png,
components目录下的HelloWorld.vue,
src目录下的App.vue、main.js、router文件夹中的index.js;

在src文件夹中,新建三个文本夹,重命名pages,用于寄存多页面文件,然后在pages里再新建四个文本夹叫index用于存放首页文件并新建一些配置文件

index.html 主页

<div id='index'></div>

index.vue 主页组件

<template>
  <h1 @click="goLogin">这是主页</h1>
</template>

<script>
  export default {
    name: 'index',
    methods: {
      goLogin () {
        location.assign('login.html')
      }
    }
  }
</script>

<style scoped>

</style>

index_main.js 主页入口文件

import Vue from 'vue'
import Index from './index.vue'

new Vue({
  el: '#index',
  render: (h) => h(Index)
})

ca88会员登录中心 3

image.png

此刻的品种协会就调动成功了

第二步、对项目目录举香港行政局部调解

笔者们根本针对的是src目录进行调度,首先来看看调节前的品种目录结构

调动前的档期的顺序目录结构

步向src文件夹中,新建叁个文书夹,取名pages,用于存放页面文件,然后在pages里面新建叁个文件夹叫index用于存放首页,然后将下图红框内的文本(文件夹)都拉进index文件夹里面,还会有最外层的index.html也拉进去

这儿的src文件夹里面独有八个公文夹一个是components用于存放组件文件,pages用于寄放页面,然后新建二个modules文件夹用于存放自个儿写的页面模块

最终踏入index文件夹,将在那之中的main.js改成index.js,保证页面包车型大巴入口js文件和模板文件的名号同样
那会儿的等级次序目录结构接调度达成了

再看项目布局,此时已多了一些其余目录,张开config目录,里面就有webpack布局文件以及别的各样配置,如下:

接下来在命令行工具中输入

npm run dev

开荒浏览器,在路子中输入login.html,假诺能跻身login页面,那么多页面使用的配置就打响了

ca88会员登录中心 4

image.png

ca88会员登录中心 5

image.png

首先步、安装Vue-cli况兼开张开端化

先是展开git,在在那之中使用npm全局安装Vue-cli,而且开张开端化
npm i vue-cli -g
然后选拔vue init <template(模板名,笔者这边运用的是webpack)>
<项目文件夹名称(作者这里运用的是project)>起头化一个Vue项目模板
vue init webpack project
随后在模板下载时候会弹出如下配置选项

安插好后按下回车就营造完毕了Vue脚手架,之后cd进入项目,何况张开node模块的设置npm i
cd project&&npm i
这儿候Vue-cli的备选干活就成功了,那时候可以通过npm run dev步向支付意况,运行后是其同样子的,不过此时的脚手架的安插都以指向单页面应用进行的,入口独有一个index.html,所以下一步就要对项目目录的结构进行部分调度

ca88会员登录中心 6布署项展开后.png

其三步、对相应的布署文件实行改造

第四步、对页面使用配置已基本变成,举办测验

此刻能够在pages里面增加一个test文件夹,在test文件夹里面创设贰个html文件作为测验页面

接下来再度npm run dev开荒开辟情形,在渠道中输入test.html,如果能跻身test页面,那么就多页面使用的陈设就成功了

在此之前做过react项目,可是尚未完善搭过框架,顺便研讨一波mobx。项目代码github地址:

修改配置文件前须求安装一个模块 glob
npm i glob

cnpm i glob
  • ###### 进入build文件夹下的utils.js进行更改,增添四个函数

// glob是webpack安装时依赖的一个第三方模块,该模块允许你使用 *等符号,
// 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
const glob = require('glob')
// 页面模板
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
const PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
const merge = require('webpack-merge')

// 多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件
// 如果该文件存在那么就作为入口处理
exports.entries = () => {
  let entries = {}, basename, pathname;
  glob.sync(PAGE_PATH + '/**/*.js').forEach((entry) => { 
    basename = path.basename(entry, path.extname(entry));
    pathname = basename.split('_')[0];
    entries[pathname] = entry;
  });
  return entries;
};

// 多页面输出配置
// 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组中
exports.htmlPlugin = () => {
  let arr = [], pathname, conf;
  glob.sync(PAGE_PATH + '/**/*.html').forEach((entry) => {
    pathname = path.basename(entry, path.extname(entry));
    conf = {
      // 模板来源
      template: entry,
      // 文件名称
      filename: pathname + '.html',
      // 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
      chunks: ['manifest', 'vendor', pathname],
      inject: true
    };
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      });
    }
    arr.push(new HtmlWebpackPlugin(conf))
  });
  return arr;
};
  • ###### 修改build/webpack.base.conf.js的输入配置

将这一段

entry: {
    app: './src/main.js'
  }

修改成

entry: utils.entries()
  • ###### 修改build/webpack.dev.conf.js的进口配置

将这两片段

const HtmlWebpackPlugin = require('html-webpack-plugin')

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
}),

疏解或删除,然后在该数组plugins后边加多

.concat(utils.htmlPlugin())

ca88会员登录中心 7

image.png

  • ###### 修改build/webpack.prod.conf.js的输入配置

将这两有的

const HtmlWebpackPlugin = require('html-webpack-plugin')

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),

注脚或删除,然后在该数组plugins后边加多(与webpack.dev.conf.js修改章程一样)

.concat(utils.htmlPlugin())

前提:在此间运用的是webpack模板举办搭建

  • 想:本身搭整个框架照旧相比棘手的,所以首先想到用它的脚手架来开端化二个光景的架构。
  • 搜:初叶搜脚手架,最知名的就是facebook官方出版的create-react-app,那大家就用那几个。

那样就代表成功了

此时浏览器会自动访谈 react
的招待分界面,如下:代表你的体系已经不乏先例运维了。

vue-cli版本:2.9.2

 npx create-react-app my-app cd my-app yarn start //或者npm start

…end

ca88会员登录中心 8运转后的页面.pngca88会员登录中心 9布置项张开前.png

第四步、对页面使用配置已基本实现,进行测量试验

  • ###### 在pages里面增多八个login文件夹,编写页面以及配置文件

ca88会员登录中心 10

image.png

  • ###### 或然本身随意新建贰个目录,只扩大html页面文件即可
 yarn add less less-loader 
修改 webpack配置文件
  • 找到 webpack.config.dev.jswebpack.config.prod.js 文件,后缀
    dev 表示开采的配置,prod
    表示是生育情状的安插,因而七个布局文件都亟需修改。
  • 修改webpack.config.dev.js,在modulerules字段中改换以下代码退换前:

{ test: /\.css$/, use: [ require.resolve( 'style-loader' ), { loader: require.resolve( 'css-loader' ), options: { importLoaders: 1, }, ... ], },

更改后:

{ test: /\.$/, // 划重点 use: [ require.resolve( 'style-loader' ), { loader: require.resolve( 'css-loader' ), options: { importLoaders: 1, }, ... { loader: require.resolve( 'less-loader' ), // 划重点 } ], },
  • 修改webpack.config.prod.js ,同理,在rules字段中改换以上代码

  • 方便更相符实际项目场景,大家在src下新建如下多少个公文夹:a.
    api文本夹存放ajax央浼b. components文本夹贮存组件c.
    pages文本夹贮存页面d. routes文本夹存放路由e.
    stores文本夹寄存数据f. utils文本夹贮存工具类函数

既然如此有了文本夹来区分分化的职能,为了便利文件的互相,我们得以行使 webpack
来设置别称。

  • 修改config文本夹下的paths文件

module.exports = { ... appApi: resolveApp( 'src/api' ), appComponents: resolveApp('src/components'), appPages: resolveApp( 'src/pages' ), appRoutes: resolveApp('src/routes'), appStores: resolveApp( 'src/stores' ), appUtils: resolveApp('src/utils'), ...
  • 修改 webpack 配置项 alias

alias: { ... api: paths.appApi, components: paths.appComponents, pages: paths.appPages, routes: paths.appRoutes, stores: paths.appStores, utils: paths.appUtils, ...

 yarn add react-router react-router-dom
  • pages文本夹中新建home.jsx页面和about.jsx页面home.jsx

import React from 'react';import { Link } from 'react-router-dom';class Home extends React.Component { render() { return ( <div> <p>这是首页</p> <Link to="/about">go to About</Link> </div> ); }}export default Home;

about.jsx

import React from 'react'import { Link } from 'react-router-dom'class About extends React.Component { render() { return ( <div> <p>这是about页面</p> <Link to="/">go to Home</Link> </div> ) }}export default About;
  • routes文本夹中新建index.jsx页面

import React from 'react'import { BrowserRouter as Router, Route } from 'react-router-dom'import Home from 'pages/home';import About from 'pages/about';const Routes = () => ( <Router> <div> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> </div> </Router>)export default Routes;
  • 为了页面赏心悦目一小点,大家写个App.less

.app { text-align: center; border: 1px solid #ddd; padding: 30px; p { color: green; }}
  • 更改app.js文件

import React, { Component } from 'react';import Routes from 'routes/index';import './App.less'class App extends Component { render() { return ( <div className="app"> <Routes /> </div> ); }}export default App;

那儿首页长相:

ca88会员登录中心 11首页.png

此时about页长相:

ca88会员登录中心 12about页

yarn add mobx mobx-react
  • 使用 mobx 你还须求安装 babel 的装饰器插件,以及修改 babel
    的配置

 yarn add babel-plugin-transform-decorators-legacy
  • 修改 package.json 文件中的 babel 参数,也许在根目录下新建贰个.babelrc 文件

"babel": { "presets": [ "react-app" ], "plugins": [ "babel-plugin-transform-decorators-legacy" ]...

这几天,你能够在您的零件中央银行使 mobx 来管理你的动静了。关于 mobx
的接纳,你能够访谈官方文书档案

  • stores里新建index.jshome.jsabout.js。 【
    注:home.js和about.js作者用了三种形式写,都能够的。】home.js

import { observable } from 'mobx';const HomeStore = observable( { title: 'this is home page'} );export default HomeStore;

about.js

import { observable } from 'mobx';class AboutStore { @observable title = 'this is about page';}export default new AboutStore();

index.js

import aboutStore from './about';import homeStore from './home';const store = { aboutStore, homeStore};export default store;
  • 修改app.js

import React, { Component } from 'react';import Routes from 'routes/index';import './App.less';import { Provider } from 'mobx-react';import stores from 'stores/index';class App extends Component { render() { return ( <div className="app"> <Provider {...stores}> <Routes /> </Provider> </div> ); }}export default App;
  • 修改pages里的home.jsx

import React from 'react';import { Link } from 'react-router-dom';import { inject } from 'mobx-react';@inject( 'homeStore' )class Home extends React.Component { render() { return ( <div> <p>{this.props.homeStore.title}</p> <Link to="/about">go to About</Link> </div> ); }}export default Home;
  • 修改pages里的about.jsx

import React from 'react'import { Link } from 'react-router-dom'import { inject } from 'mobx-react';@inject( 'aboutStore' )class About extends React.Component { render() { return ( <div> <p>{ this.props.aboutStore.title }</p> <Link to="/">goto Home</Link> </div> ) }}export default About;

那是当今的首页:

ca88会员登录中心 13首页.png

这是现行反革命的about页:

ca88会员登录中心 14about页.png

 yarn add axios
  • api文本夹里扩展home.js

import axios from 'axios';export default { /** * 获取首页列表页数据 * @returns {Promise.<*>} */ async getList(){ return await axios.get( 'http://lemonof.com:82/api/getList' ).then => res.data.data ); }}
  • 更改stores里的home.js

import { observable, action } from 'mobx';import HomeApi from 'api/home';const HomeStore = observable( { title: 'this is home page', list: [], // 获取首页数据 async getList() { this.list = await HomeApi.getList;export default HomeStore;
  • 更改pages里的home.jsx

import React from 'react';import { Link } from 'react-router-dom';import { observer, inject } from 'mobx-react';@inject( 'homeStore' )@observerclass Home extends React.Component { componentDidMount() { this.props.homeStore.getList(); } render() { return ( <div> <p>{this.props.homeStore.title}</p> <Link to="/about">go to About</Link> <div style={{ textAlign: 'left', width: '450px', margin: 'auto' }}> <p>下面是列表数据:</p> { this.props.homeStore.list && this.props.homeStore.list.map => { return ( <div key={el.id}>标题:{el.title}</div> ) } ) } </div> </div> ); }}export default Home;

那时首页长相:【页面未有优化,请将就看】

ca88会员登录中心 15首页.png

此刻about页长相:【页面没有优化,请将就看】

ca88会员登录中心 16about页.png

哇!终于写完了。后续作者再把UI优化下。最后项目代码地址:

翻开小说有:create-react-app全家桶router+mobx:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图