angular + bootstrap

最新推荐文章于 2024-07-06 14:37:27 发布

CPlusPlusLove

最新推荐文章于 2024-07-06 14:37:27 发布

阅读量794

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/chenjh213/article/details/72234880

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

安装依赖包

#安装webpack
npm install webpack -g
#自动生成一个package.json文件
npm init
#将webpack增加到package.json文件中
npm install webpack --save-dev
#如果想要安装开发工具
npm install webpack-dev-server --save-dev

npm install angular --save
npm install babel-core babel-loader babel-preset-env --save
npm install jquery bootstrap@3 expose-loader --save
npm install url-loader style-loader css-loader --save

编辑`app/index.js`

const angular = require('angular');//引入angular
const ngModule = angular.module('app',[]);//定义一个angular模块
const _ = require('lodash');
const $ = require("jquery");
require ("bootstrap/dist/css/bootstrap.css");
require ("bootstrap/dist/js/bootstrap.js");
function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

编辑`page.html`

<html ng-app>
    <head>
    </head>
    <body>
      <script src="dist/bundle.js"></script>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!

        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>

    </body>
</html>

也可以直接在html中引入

<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

编辑`webpack.config.js`

const path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    },
    {
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
    { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
    { test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" },
    { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
  ]
  }
}