git —— 最常用的代碼版本管理工具
git的服務端常見的有【GitHub】、【coding.net】、【碼雲】等。
Linux下安裝git
sudo yum -y install zlib-devel openssl-devel cpio expat-devel gettext-devel curl-devel perl-ExtUtils-CBuilder perl-ExtUtils-MakeMaker
window下安裝git
- 下載安裝包（官網）：https://git-for-windows.github.io/
- git基礎配置：
//用戶名
git config --global user.name "名字"
//郵箱
config --global user.email "郵箱名"
//其他配置
//讓Git忽略window/Unix換行符轉換的事
git config --global core.autocrlf false
//配置“kdiff3”——要是沒裝就忽略下面這一行
git config --global merge.tool "kdiff3"
//編碼配置
//避免git gui中的中文亂碼
git config --global gui.encoding utf-8
//避免git status顯示的中文文件名亂碼
git config --global core.quotepath off
- 還需在window上配置：
git config --global core.ignorecase false
常用git命令：
git add . //把所有改動文件都“添加”上
git checkout xxx //撤回xxx文件的修改（回到以前的狀態）&& 切換分支
git cimmit -m "xxx" //提交記錄
git remote add origin 生成的含ssh/https的倉庫地址 //從本地連接遠程倉庫（此步驟都是放在上面commit之後執行）
git push origin master //推送到服務端(第一次push前需要先pull)
git pull origin master //從服務端下載一些功能
git branch //查看分支
git branch xxx //創建分支
git branch -d xxx //刪除分支
git checkout -b xxx //創建新的分支並立即切換過去
git checkout -- xxx //恢復刪除（git rm）的文件
git merge xxx //合併分支（把當前分支的代碼合併到xxx分支上）
git status //查看狀態
git diff (xxx) //查看修改內容
git reflog //查看命令歷史
比如 git status -s 後如下圖：
【AM】狀態意爲：此文件在我們將它添加到緩存後又有改動。
webpack —— 項目編譯打包工具
其模式有兩種：
- development
- production —— 壓縮過的
使用第二種方式，在output的filename中要加“[contenthash]”：
output:[
filename:'bundle.[contenthash].js',
path:path.join(__dirname,'dist')
//當前（大）目錄
]
新建、安裝webpack目錄
mkdir webpack_demo
cd webpack_demo
npm install -g webpack
npm n init
npm install --save-dev webpack
webpack -v //(查看版本)
webpack.config.js基本結構：
module.exports={
entry:{}, //入口文件——entry:'目標文件名'——一般形式：path.join(__dirname,'文件名')
output:{}, //出口文件——{path:path.resolve(__dirname,'dist') , filename:'導出文件名'}
module:{}, //模塊——vue-loader&css&js&圖片的解析就在這裏
plugins:[], //插件配置
devServer:{}
}
說說devServer —— 服務項，需要用到webpack-dev-server：
npm install webpack-dev-server --save-dev
devServer:{
//設置基本目錄結構
contentBase:path.resolve(__dirname,'dist'),
host:'服務器IP地址/localhost',
//服務端壓縮是否開啓
compress:true,
port:配置服務端口號 //不建議用80：容易被佔用
}
還有output，此選項裏面有一個選項publicPath，非常有用——確定線上資源路徑：
output:{
path:'',
filename:'',
publicPath:'https://cdn.com/'
}
這樣，比如需要的資源js/xxx.js就變成了https://cdn.com/js/xxx.js，就符合線上需要了。
以上四個就是此選項的基本配置項了。。。
webpack如何配置vue-loader
一般我們會新建文件vue-loader.config.js：
module.exports=(isDev)=>{
return {
preserveWhitepace:true, //打包時去掉template中的空格（防止對樣式有影響）
//...
cssModules:{} //css文件處理（主要是對文件名和類命名）
}
}
然後在配置文件webpack.config.js裏引入：
const createVueLoaderOptions=require('./vue-loader.config.js')
const isDev=process.env.NODE_ENV === 'development'
//在config對象的module中的rules選項裏增加：
{
test:/\.vue$/,
loader:'vue-loader',
options:createVueLoaderOptions(isDev)
}
webpack配置加載css
引入插件：
npm install css-loader style-loader extract-text-webpack-plugin --save-dev
然後在webpack.config.js裏增加如下：
const ExtractTextPlugin=require('extract-text-webpack-plugin');
//path對象中
const plugin=new ExtractTextPlugin({
filename:'[name].css',
ignoreOrder:true //禁用順序檢查（這對css模塊很重要！）
});
//path中的module中的rules數組中
{
test:/\.css$/,
exclude:/node_modules/,
use:plugin.extract({
use:{
loader:'css-loader',
options:{
modules:true
}
}
fallback:'style-loader'
});
}
webpack配置加載圖片
兩種方式：
- file-loader：hash計算文件名
npm install file-loader --save-dev
module.exports={
//...
module:{
rules:[
{
test:/\.(png|jpg|gif|jpeg|svg)$/,
use:['file-loader']
}
]
}
}
- url-loader：base64編碼格式（小圖片資源適用）
npm install file-loader url-loader --save-dev
module.exports={
//...
module:{
rules:[
{
test:/\.(png|jpg|gif|jpeg)/,
use:[{
loader:'url-loader',
options:{
limit:1024*30,
fallback:'file-loader'
}
}]
}
]
}
}
或者我們可以直接在module中的loaders選項中配置：
module.exports={
//...
module:{
loaders:[
{
test:/\.(png|jpg|gif|jpeg|svg)/,
loader:'url-loader?limit=1024*10'
},
//...
]
}
}
對JS的處理
用到babel插件，最主要的還是其中的latest插件：
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-latest
做完上面兩步，我們就可以在webpack.config.js文件裏這樣寫：
var path=require('path');
module.exports={
//...
module:{
loaders:[
{
test:/\.js$/,
loader:'babel',
include:path.resolve(__dirname,'src'),
exclude:path.resolve(__dirname,'node_modules'),
query:{
presets:['latest']
}
}
]
}
}
又或者，可以直接在package.json配置文件里加入：
"babel":{
"presets":["latest"]
}