Mac下通过npm安装webpack 、vuejs，以及引入jquery、bootstrap等（初稿）

前言：

初次接触前端开发技术，一些方向都是在同事的指引和自己的探索后，跑了个简易web，迈入全栈系列。由于是事后来的文章，故而暂只是杂记，写的粗略且不清晰，后续将补之。

主要参考文档：

http://www.runoob.com/vue2/vue-install.html

http://blog.csdn.net/haoaiqian/article/details/72453286

https://vuejs-templates.github.io/webpack/

http://www.cnblogs.com/kongxianghai/p/6910133.html

部分线索

---

• 下载和安装node.js (通过brew安装node.js)
• 安装webpack (通过npm安装webpack)
• 安装vue （命令：npm install vue）
• 安装vue-cli（命令： npm install -g vue-cli）
• 基于webpack初始化一个vue项目（命令：vue init webpack-simple my-project）
• 进入工程，准备启动项目（cd my-project）
• npm install / yarn install （两种方式都可以）
• 运行项目 （命令：npm run dev / yarn run dev）
• 构建项目 （命令：npm run build / yarn run build）

---

查看jquery可安装的版本

npm view jquery versions

安装jquery，选取一可安装的版本，如

npm install jquery@2.2.3 --save-dev

配置jquery

将jquery以插件打包，需要为webpack的plugins进行插件设置。

在build/webpack.base.conf.js文件中，在整个配置对象的末尾增加plugins配置。

在webpack.base.conf.js中的配置项，可以在dev和build出来的pro版本中都有效。

下面的配置其实就是变量名的真正指向设置，这样，在页面中对jquery的各种名字的调用就会有效，否则bootstrap跑不起来。

var webpack = require("webpack")

  plugins: [

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

      "windows.jQuery": "jquery"

    })

  ]

安装bootstrap

npm install bootstrap@3.3.0 --save-dev

配置bootstrap

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用，注意这里的路径，不在是从src/assets加载，而是换成了从node_modules加载。

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

最后，启动工程

npm run dev