vue项目开发学习心得

vue项目开发学习心得

vue
v-bind和v-model的区别：
v-bind一般绑定样式等 v-model一般作用于表单空间

dos命令
cd 1 进入桌面

vue环境搭建
1、下载node.js并安装
2、在dos命令行输入 node -v 确认node已安装就绪
3、在dos命令行输入 npm install -g vue-cli 安装vue-cli
4、在dos命令行输入 vue- V（V要大写）确认vue-cli已安装就绪
5、在dos命令行通过 d:【进入d盘】、cd test【进入test文件夹】,执行 vue init webpack projectname【项目名】创建项目
6、在dos命令行进入项目文件夹，输入npm run dev 运行项目demo

git代码上传和下载
1、进入官网下载git并安装【直接下一步】
2、在码云注册账户
3、右击鼠标打开git bash命令 通过输入 git --version查看版本号
4、在git bash命令行输入ssh-keygen -t rsa -C “[email protected]”【邮箱号】生成公钥。按提示完成三次回车。
5、在git bash命令行输入cat ~/.ssh/id_rsa.pub查看公钥。
6、进入码云个人设置 安全设置 ssh公钥输入公钥 标题为开始的邮箱点击确定
7、在码云的项目右上角点击克隆/下载 选择ssh复制链接
8、在git bash命令行输入 git clone [email protected]:yu_xiaohua/catch.git 就可以将项目文件下载到当前命令的文件地址中
上传
9、在gitbash命令行进入到项目文件夹，输入git status查看项目状态
10、在gitbash命令行输入 git add . 将项目文件增加到缓冲区，【如出现Please tell me who you are.请执行git config --global user.email “你的邮箱”
git config --global user.name “你的名字”】
11、在git bash 命令行输入git commit -m ‘project initialized’,回车，继续输入git push，现在即将项目更新到码云了

移动端1像素问题
问题来源：设备物理像素和css像素是两个不同的逻辑，物理像素取决于设备厂商，而高dpi设备可能会将css中的1px的放大到2px
这取决与设备的dpi
问题解决：在在入口js【main.js】中引入border.cssborder.css

移动端click 点击300毫秒延迟问题
问题来源：设备浏览器为了区分双击缩放和单击的事件，设置有一个300毫秒的延迟
问题解决：
1、关闭项目运行，在dos命令下输入npm/cnpm install fastclick --save【save的意思是打包的时候仍然保存改依赖】
回车确认下载依赖
2、在入口js【main.js】中添加代码 import fastClick from ‘fastclick’ 引入fastclick

安装stylus
dos进入项目文件夹 输入
npm install stylus --save
npm install stylus-loader --save

css中引用全局变量
1、创建全局变量文件varibles.styl【后缀名为styl】
2、在该文件中创建变量KaTeX parse error: Expected 'EOF', got '#' at position 11: bgColor = #̲00bcd4 3、在style…bgColor即可调用

confont的使用
1、进入iconfont的官网->注册->将需要的图标加入购物车->添加到项目->下载到本地
2、将后缀名为iconfont.eot、iconfont.woff、iconfont.ttf、iconfont.svg、iconfont.css放到项目目录中
3、如果iconfont.css与其他文件路径不一致，则需要修改iconfont.css中的url。
4、【如果所有页面都需要该标签的话】在入口文件【main.js】中添加代码import '@/assets/style/iconfont.css’引用iconfont.css
5、在需要使用的标签中class=“iconfont” 在标签内容中输入图标的代码。

vue缩写路径的办法
在build文件夹webpack.base.conf.js文件中找到alias对象，添加一项缩写规则即可

vue配置域名的方法
三步走
1、在项目文件夹config下的index.js修改如下：

2、在项目文件夹build下的webpack.dev.conf.js 添加disableHostCheck: true 如下

3、在windows在C盘 windows system32 driver etc host中添加 127.0.0.1 www.catch.com【域名】

git分支的作用及提交和合并方法
分支的作用便于代码版本及功能的修改等
【以下指令的前提是已经创建了分支，可以在码云上手动创建】
查看分支 git tranch -av
1、切换到分支git checkout tranchName【分支名】
2、git add . 3、git commit -m ‘description’ 4、git push
合并分支
1、git checkout master【进入主分支】 2、git merge origin/tranchName【分支名】 3、git push