zoukankan      html  css  js  c++  java
  • npm教程03

    vue init webpack vue02通过脚手架按照webpack模板建一个vue项目

    接着运行npm install 安装依赖,脚手架自动去读取package.json

    自动从网上下载依赖的模块并且生成一个node_modules目录

    接着运行npm install bootstrap安装bootstrap,

    开始运行npm run dev,它会自动执行[build/dev-server.js]

    1、webpack对源码进行编译打包,并且返回compiler对象

    2、创建express服务器(类似于tomcat),提供静态文件的web服务,启动端口默认是8080

     

    当我们写完程序,代码放到src目录下

    当断开express服务器,发现无法访问已经已经编译后的compiler对象,我们希望的是能够帮从新编译出一个静态文件。

    所以运行另外一条命令npm run build 执行的build/build.js文件

    1、自动删除目录

    2、执行webpack构建编译文件然后保存dist目录

    3、输出相关的信息

     (生成静态文件)

     

    引入bootstrap

    先安装npm install jquery --save-dev

    modules目录下自动生成了jquery目录

    编辑package.json发现自动增加jquery的依赖(不需要人手操作)

    手动编辑webpack.base.conf.js

    module.exports里面加入:

    plugins: [  

      new webpack.ProvidePlugin({  

        $:"jquery",  

        jQuery:"jquery",  

        "windows.jQuery":"jquery"  

      })  

    ]  

    到此webpack已经搞定了jquery的引用下面就是自己src的使用

    App.vue 编写测试jquery代码,是成功。

    到全局目录复制bootstrap的这3个文件,然后粘贴到srcassets 目录下

    main.js引用的文件将是全局的

    测试

    随便挑1vue文件,写一个button,显示正常。

  • 相关阅读:
    深圳成为全球第一个100%电动公共汽车的城市
    layui 数据表格按钮事件绑定和渲染
    Layui 改变数据表格样式覆盖
    js 遍历删除数组
    layui 数据表格最简单的点击事件
    layui 数据表格使用
    Layui 解决动态图标不动的问题
    Js 改变时间格式输出格式
    PHP 面向对象的数据库操作
    PHP SQL预处理
  • 原文地址:https://www.cnblogs.com/Salicejy/p/8882725.html
Copyright © 2011-2022 走看看