一、node.js
- 官网下载地址：下载 | Node.js
- Node.js默认安装目录为 C:\Program Files\nodejs, 你也可以修改目录，安装的时候一路都是 next（下一步）
- 最后install，等安装好，在命令行里： node -v，看是否会出现一个版本号，出现了说明安装成功！
- 最后还要检查一下环境变量是否配置：我的电脑（此电脑）右键，打开属性，看看里面是否有node变量
二、npm 5. 新版的 node.js已经集成了 npm，所以之前安装 node时 npm也一并安装好了，可以通过输入 "npm -v" 来测试是否成功安装 5. 升级 npm：npm install npm -g cnpm install npm -g
二、cnpm 命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org
三、webpack 用npm 安装webpack：npm install webpack -g
四、Vue
- 安装vue：npm install vue -g
- 安装Vue.js 官方命令行工具(脚手架)，可用于快速搭建大型单页应用：
- 查看版本 vue -V
#全局安装 vue-cli
npm install --global vue-cli
#创建一个基于 webpack 模板的新项目
vue init webpack my-project
#安装依赖
cd my-project
npm install
npm run dev
五、gulp
- 全局安装 gulp：npm install --global gulp
- 作为项目的开发依赖（devDependencies）安装：npm install --save-dev gulp
六、git与github 七、bootstrap bootstrap中js插件依赖于jquery，所以在这之前必须安装jquery。
新建bootstrap学习文件夹 npm init 建立package.json文件，文件名称不能有中文
"scripts": {
"server": "webpack-dev-server" //用于热更新，webpack打包时自动更新页面
},
手动创建src文件夹，下面直接建立index.js入口文件，然后创建css文件夹，下面创建style.css文件
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import './css/style.css' //自定义样式写在这里面，增加or覆盖bootstrap的样式文件
手动创建webpack.config.js文件
let htmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack')
const path = require('path');
module.exports = {
mode: "production",
entry: './src/index.js', //入口文件的配置项
output: { //出口文件的配置项
path: path.resolve(__dirname, './dist'),
filename: 'js/bundle.js',
},
module: {//配置 loader 模块：例如解读CSS,图片如何转换，压缩
rules: [//相关规则写在这里
{
test: /\.css$/,//正则表达式：根据后缀为 .css 的文件来匹配 css 文件
loader:'style-loader!css-loader' //css-loader使得在js里面可以处理css文件，style-loader使得js处理完的样式插入到index.html页面中
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test:/\.(png|jpg|gif|svg)$/i,
loader:[
'url-loader?limit=20000&name=img/[name].[ext]',
'image-webpack-loader'
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src', 'audio:src'],
minimize: true
}
}
}
]
},
plugins:[
new htmlWebpackPlugin({
template:'./index.html' //模板文件
}),
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
})
], //插件，用于生产模版和各项功能
mode: 'development', //打包模式，默认生产者模式,
devServer:{
contentBase:path.resolve(__dirname,'dist'), //基本目录结构，监听哪里的代码
host:'localhost', //ip地址，不建议填localhost 命令行ipconfig查看ipv4的值即是ip地址
compress:true, //服务器压缩参数，是否启用服务器压缩，一般启用
port:80 //任何喜欢的数字
}
};
安装jquery：npm install jquery@2.2.3 -save 安装bootstrap：npm install bootstrap@3.3.0 -save 安装webpack：npm install webpack webpack-cli --save-dev 安装html-webpack-plugin：npm install html-webpack-plugin --save-dev 安装style-loader css-loader：npm install --save-dev style-loader css-loader 安装image-webpack-loader：npm install --save-dev image-webpack-loader 安装url-loader：npm install --save-dev url-loader ——用于在css里面插入图片 安装html-loader：npm install --save-dev html-loader ——用于在html里面通过img插入图片 安装热更新(webpack打包之后页面自动刷新)：npm install webpack-dev-server --save-dev 报以下错误： ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 1:0 Module parse failed: Unexpected character ' ' (1:0) 解决办法： 安装file-loader：npm install file-loader --save-dev 执行：webpack，打包成功，bootstrap生效
以后代码写在根目录下的index.html文件里面，dist下面的index.html是打包后生成的
