关于Vue项目创建时的一些配置

_62
287 阅读4分钟

关于Vue项目创建时的一些配置

1 vuecli创建项目

按照自己的需求创建项目，如果需要安装配置eslint(代码检查工具)可先看下面的配置在进行项目创建

vue create 项目名

创建完成后使用cd进入项目然后启动项目

cd 项目名
npm run serve

2 推送仓库 (示例使用gitee)

2.0 git基础回顾

1.配置用户信息(先配置)

git config --global user.name "xxx"
git config --global user.email "xxx@xx.com"

// 打开git config 命令的帮助手册(快速参考)
git help config (-h)

2.获取Git仓库

// 2.1 现有目录初始化
git init
// 2.2 克隆
git clone "address"

3.查看状态暂存

git status // 查看文件状态
// 精简显示
git status -s
git status --short

// 推送到暂存区
git add .

// 提交更新
git commit -m "日志"

// 提交
git push

// 查看提交历史
git log
git log -2 // 最新两条提交历史
git log -2 --pretty=oneline // 一行显示最新两条提交历史信息

回到指定版本
git reset --hard <CommitID> // 根据提交历史ID回到指定版本
git relog --pretty=oneline // 在旧版本中使用，查看命令操作历史

4.配置SSH

ssh-keygen -t rsa -b 4096 -C "user.email@xx.com" // 生成ssh

连续敲击3次回车，可在 C:\Users\用户名文件夹\.ssh 目录中生成 id_rsa 和 id_rsa.pub 两个文件，将id_rsa.pub 中的文件黏贴到gitee设置中的公钥中即可。 5.分支

git branch // 查看所有分支
git checkout login // 切换到login分支
git checkout -b 分支名称 // 快速创建并切换到分支
git merge login // 合并当前分支和login分支
git branch -d 分支名称 // 删除分支，如果没有合并就删除，会报错
git branch -D 分支名称 // 强制删除

6.提交(本地分支)

git push -u // -u表示把本地分支和远程分支进行关联，只在第一次推送的时候需要带-u参数
For example:git push -u origin payment:pay

git remote -v //查看origin中保存的地址
git remote rm origin // 删除origin这个变量
gir remote show 远程仓库名称 // 查看远程仓库中，所有分支列表的信息

7.跟踪分支

// 从远程仓库中，把对应的远程分支下载到本地仓库，并把下载的本地分支进行重命名
git checkout -b 本地分支名称 远程仓库名称/远程分支名称
For example:git checkout -b payment origin/pay

8.拉取最新代码

git pull

2.1 创建本地仓库

image.png

2.2 推送到gitee上

在使用vue-cli创建项目时会自动生成.git文件 image.png 可以直接根据gitee给你的提示继续

// 添加远端地址到本地仓库
git remote add origin https://gitee.com/user.name/project.name.git
// 推送到远程仓库
git push -u origin master

刷新gitee，查看代码是否上传成功 image.png

3 调整目录结构并且按自己需求引入组件(For example:Vant)

3.1 关于生产依赖和开发依赖

// 生产依赖
npm i xxx --save;
npm i xxx -S;
npm i xxx
// 开发依赖
npm i xxx --save-dev;
npm i xxx -D

3.2 Vant

3.2.1 下载

npm i vant (完整:npm install vant --save)

3.2.2 引入

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

main.js中完整引入vant组件，使用时根据官网提示使用，也可以按需导入自己需要的组件，官网地址：vant-contrib.gitee.io/vant/#/zh-C…

4 ESLint (代码规范)

4.1 什么是eslint

eslint是一个代码检查工具，用来检查代码是否符合规范 代码规范规则推荐文档:github.com/standard/st…

4.2 安装ESLint

4.2.1 安装插件

image.png

4.2.2 在设置面板中配置

image.png

image.png

打开后加入这一段代码

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

4.2.3 可能遇到的问题

查看代码文件右下方

image.png

如果显示禁用，点击打开跳出对话框选择anywhere

4.2.4 检查eslint是否生效

将项目中随机一个文件的路径改成"vue"保存，看是否会自动变为'vue'

5 rem配置 (移动端)

5.1 安装包

// 后处理器 开发阶段使用
// 作用：把px单位自动转成rem单位
npm i postcss-pxtorem@5.1.1 -D

// 修改rem基准值的js插件 需要在打包后使用
// 作用：根据设置屏幕的宽度去调整rem的值(html标签上的font-size的大小)
// 它的默认计算方式是屏幕宽度的1/10，默认值是37.5
npm i amfe-flexible

5.2 配置postcss

在根目录下创建postcss.config.js文件，加入内容

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

npm run serve重启项目,查看px是否变成rem

5.3 引入amfe-flexible

在src/main.js中导入

import 'amfe-flexible'
avatar
文章
阅读
粉丝