wangtaoj/mall-admin

mall后台页面

工具版本

node.js 8.11.1
webpack 3.5.5

npm知识

npm命令

npm init #引导创建一个package.json, 项目初始化。 npm install XXX -g #全局安装
npm install xxx@version #指定版本号 npm install xxx --save-dev #安装到当前项目
npm install xxx --save #安装到当前项目
npm uninstall xxx -g #卸载全局安装
npm uninstall xxx --save-dev #卸载当前项目安装的组件
npm uninstall xxx --save #卸载当前项目安装的组件
npm -v #查看npm版本

注:
--save-dev, --save会将安装的组件添加到package.json, --save-dev只是开发需要, --save是生产环境也需要的组件, 比如jqury。

安装依赖

1. 安装webpack
   npm install [email protected] --save-dev
2. 安装css loader
   npm install [email protected] --save-dev
3. 安装style loader
   npm install [email protected] --save-dev
4. 安装url loader
   npm install [email protected] --save-dev
5. 安装file-loader
   npm install [email protected] --save-dev
6. 安装html-loader
   npm install [email protected] --save-dev
7. 安装extract-text-webpack-plugin插件
   npm install [email protected] --save-dev
8. 安装html-webpack-plugin插件
   npm install [email protected] --save-dev
9. 安装webpack-dev-server
   npm install [email protected] --save-dev

整理:
a. npm install [email protected] [email protected] --save-dev
b. npm install [email protected] [email protected] --savedev
c. npm install [email protected] [email protected] [email protected] --save-dev
d. npm install [email protected] [email protected] --save-dev

注:
a. css-loader, style-loader, extract-text-webpack-plugin作用于css
b. url-loader, file-loader作用于图片, 字体等资源
c. html-webpack-plugin作用于html
d. html-loader作用于html, 可以在目标html文件中使用<%=require('html-loader!./common/nav.html')%>语句从而导入指定的html, 对于公共的如header.html, footer.html便可以使用。

本项目操作

a. 需要本地有node环境, 使用node.js 8.11.1
b. 全局安装webpack
npm install -g [email protected] --save-dev
c. 安装项目所有环境依赖
npm install
d. 项目开发预览
npm run dev_win(window) || npm run dev(linux)
localhost:9000/view/index.html
e. 生产环境使用
npm run dist_win(window) || npm run dist(linux)