viivmall 项目初始化

作者: 不要变成发抖的小喵喵喵喵喵喵 | 来源:发表于2018-03-20 14:44 被阅读0次

viivmall 项目初始化
基于Element UI的后台管理搭建
dva.js 上手
webpack构建项目
打造属于自己的脚手架
Hello Vapor
用vue-cli3开发一个模仿饿了吗的ui库
Go 项目运行记录
webpack4搭建react脚手架
4.初始化node项目（package.json文件）

viivmall-fe

项目初始化

目录结构设计

git项目建立
- 使用码云托管私有项目地址
- 建立组织
- 新建项目
git权限配置
- git clone 选择SSH方式可以不必每次都输入密码，但是要配置公钥
- 生成SSH key的具体步骤
  1. 设置git的username和email
```
$ git config --global user.name "viivLgr"
$ git config --global user.email "viivLgr@163.com"
```
  1. 生成密钥
```
$ ssh-keygen -t rsa -C "viivLgr@163.com"
```
  一路回车，输入自己的密码。最后看到两个文件：id_rsa和id_rsa.pub。
  1. 复制id_rsa.pub的内容
```
$ cat id_rsa.pub // 查看内容，然后复制
```
  1. 在git项目设置中添加密钥

.gitignore的配置

生成.gitignore文件

vim .gitignore // 新建文件

// 内容
.DS_Store
/node_modules/
/dist/


:wq   // 保存并退出

切换分支进行开发

切换新分支

$ git checkout -b mmall_v1.0 // -b表示新建  checkout表示切分支 mmall_v1.0表示分支名称

查看分支

$ git branch

$ mkdir src       // 新建scr文件夹
$ cd src          // 进入src文件夹
$ mkdir view 
$ mkdir page
$ mkdir service 
$ mkdir util
$ mkdir image

$ npm init        // 初始化，会生成一个package.json文件

$ sudo npm install webpack@1.15.0 -g   // 管理员权限全局安装1.15.0版本的webpack
$ npm install webpack@1.15.0 --save-dev  // 在本地目录下安转1.15.0版本的webpack

webpack配置

// webpack.config.js
var config = {
    entry: { // 可以有多个入口文件
        'index': ['./src/page/index/index.js'],
        'login': ['./src/page/login/index.js']
    },
    output: { // 打包目录
        path: './dist',
        filename: 'js/[name].js'
    }
};
module.exports = config;

引用jQuery CDN https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js 不加协议的情况会自动补全
修改webpack.config.js，externals可以把外部的模块或变量加载进来

externals: {
    jquery': 'window.jQuery'
}

externals

分离公共js
在webpack.config.js的plugins中加入

// 引入webpack
 var webpack = require('webpack');

// 在entry中配置
'common': ['./src/page/common/index.js'],

// 在plugins里配置
new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: 'js/base.js'
}),

webpack css 配置

module: {
    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader"}
    ]
},

webpack分离css单独打包步骤参考

安装 extract-text-webpack-plugin

$ npm install extract-text-webpack-plugin@1.0.1 --save-dev

在webpack.config.js里配置

// 引入
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// 在plugins里配置
new ExtractTextPlugin("css/[name].css"),

修改loader的使用

loaders: [
    { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]

打包html文件

安装 html-webpack-plugin

$ npm install html-webpack-plugin --save-dev

在webpack.config.js里配置

// 引入
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 在plugins里配置
new HtmlWebpackPlugin({
    template: './src/view/index.html',
    filename: 'view/index.html',
    inject: true,
    hash: true,
    chunks: ['common', 'index']
})

批量添加html plugin

// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
    template: './src/view/' + name + '.html',
    filename: 'view/' + name + '.html',
    inject: true,
    hash: true,
    chunks: ['common', name]
    }
}

// html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login'))

创建html模板
安装html-loader

$ npm install html-loader --save-dev

新建html-head.html文件

<head>
    <meta charset="UTF-8">
</head>

在index.html文件中用require方式引入html-head.html(html-webpack-plugin支持ejs模板写法)

<!DOCTYPE html>
<html lang="en">
<%= require('html-loader!./layout/html-head.html') %>
<body>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

webpack 图片和字体配置

安装url-loader 安装file-loader

$ npm install url-loader --save-dev
$ npm install file-loader --save-dev

webpack.config.js 配置
limit:限制图片大小小于limit的图片用base64格式，大于limit的图片保存在resource目录下

// loaders: 
{ test: /\.(gif|png|jpg|jpeg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]'}

安装webpack-dev-server

$ npm install webpacl-dev-server@1.16.5 --save-dev

修改webpack.config.js => entry => client

'common': ['./src/page/common/index.js', 'webpack-dev-server/client?http://loaclhost:8088/'],

设置webpack.config.js => output => publicPath，解决依赖引用问题

publicPath: '/dist',

启动

$ webpack-dev-server --inline --port 8088

添加环境变量配置，dev / online

var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

启动方式

// dev 开发启动
WEBPACK_ENV=dev webpack-dev-server --inline --port 8088
// online 上线启动
WEBPACK_ENV=online webpack-dev-server --inline --port 8088

修改webpack.config.js配置，根据环境变量决定是否要遭common目录追加webpack-dev-server的client

if('dev' === WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://loaclhost:8088/');
}

将启动命令存放在package.json文件的scripts中，使用npm的短命令

"scripts": {
    "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
    "dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist": "WEBPACK_ENV=dev webpack -p",
    "dist_win": "set WEBPACK_ENV=dev && webpack -p",
},

提交

$ git status // 查看状态
$ git add .   // 添加文件
$ git ca "initial" // 提交文件
$ git push     // 推送
$ git push --set-upstream origin mmall_v1.0 // 设置推送分支
$ git st // 再次查看状态

$ git merge origin master  // 合并master分支

$ git tag tag-dev-initail   // 打标签
$ git push origin tag-dev-initail  // 推送标签