文章目錄
搭建git環境
一. 在GitHub搭建遠程代碼倉庫
創建成功
二. 創建git文件夾
在相應路徑下輸入以下命令
git init
複製Github中該項目的ssh鏈接，注意是ssh，不是https
三. 克隆GitHub代碼
鍵入以下命令
git clone 你複製的ssh鏈接
成功克隆GitHub中的遠程代碼至本地
四. 將本地項目與遠程倉庫建立連接
git remote add origin 你複製的ssh密鑰
五.測試遠程連接
修改readme文件
鍵入以下git命令
git add .
git commit -m “git測試”
git push
可以看到github上的代碼也已經成功更新了
創建開發分支
因爲我們開發一個項目，以及項目上線後會經常去修改一些代碼，
但是一個好的產品肯定不能一天就更新十幾個版本吧，
所以我們需要新建一個開發分支，
我們可以頻繁的去修改開發分支，在上面修改bug或者添加新功能
使用master分支去存放提供給用戶的穩定代碼
當我們在開發分支上已經做了大量的工作後，
就可以將開發分支的代碼與master分支的代碼合併，從而發佈一個新版本
鍵入以下git命令
git checkout -b dev
git push
可以看到新的分支已經建立
創建移動端的vue工程
一.創建vue項目
運行以下命令
vue init webpack 自定義的項目名
除了最後兩個test選項以外,其餘全部填y即可
運行以下命令,查看vue工程是否成功建立
npm run dev
二.引入第三方樣式文件
因爲在移動端因爲不同分辨率可能導致著名的1px border問題
同時,我們也要去掉html自帶的一些例如margin,padding的樣式
所以我們引入以下兩個第三方的css文件,放置於src/assets目錄下
如果沒有這兩個第三方的css文件,可以去我的GitHub上下載我的項目即可
三.引入移動端js文件
因爲移動端有一個問題,就是觸發點擊事件時,會有300毫秒的延遲,所以我們要下載一個第三方的js依賴解決這個問題
運行以下命令
npm i fastclick --s
在src/main.js中寫入以下代碼
然後重啓該項目即可
四.引入less
下載依賴
npm install less less-loader --save
全局配置
修改build/webpack.base.conf.js文件
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass","style-loader!css-loader!less-loader"]
},
組件中使用
修改組件的style標籤爲
<style lang = "less" scoped>
完整示例
<!-- -->
<template>
<div class='wrapper'>
<i class="iconfont icon49"></i>
<input type="text">
</div>
</template>
<script>
export default {
components: {},
data() {
return {
};
},
methods: {},
created() {},
mounted() {},
}
</script>
<style lang = "less" scoped>
.wrapper{
display: flex;
justify-content: spacec;
width: 100%;
background-color: #f2f2f2;
border-radius: 10px;
i{
color: red;
}
}
</style>
在全局使用less變量
1 安裝依賴
npm install sass-resources-loader --save-dev
2 定義一個less文件存放全局變量
3 修改build/utils.js文件
此處添加一個lessResourceLoader函數
代碼如下
function lessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname,'../src/assets/styles/common.less' )你定義的放置全局變量的less文件的路徑
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
修改return語句中的less項
less: lessResourceLoader('less'),
3 在任意一個組件內使用
推送代碼至開發分支
鍵入以下命令
git add .
git commit -m “project init”
git pull origin dev --rebase
git push origin dev:dev
查看GitHub項目的dev分支,可以看到代碼已經更新
而我們的master分支沒有更新,等我們開發完第一版代碼後,再將代碼同步至master分支
