vue移动音乐app开发笔记 一. 搭建git环境以及新建vue移动端项目的准备工作

搭建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分支