YK菌

1. 使用新版vue-cli

# 1. 使用新版vue-cli

在这里插入图片描述

cnpm install -g @vue/cli

在这里插入图片描述

# 2. 查看版本

vue --version

在这里插入图片描述

# 3. 使用图形化界面创建项目

vue ui

在这里插入图片描述

在这里插入图片描述

# 1. 创建项目

在这里插入图片描述 在这里插入图片描述

# 2. 手动配置项目

在这里插入图片描述 在这里插入图片描述

# 3. 项目配置

在这里插入图片描述

在这里插入图片描述

# 4. 进入项目仪表盘

在这里插入图片描述

# 5. 配置ElementUI组件库

在这里插入图片描述

插件配置

在这里插入图片描述

# 6. 配置axios

在这里插入图片描述

# 7. 启动页面

在这里插入图片描述 在这里插入图片描述

# 8. 语法处理ESLint

任务-serve-输出-警告 可以看到一些ESLint发出的语法报错警告 VSCode的格式化文档和ESLint规则不一致

  1. 项目根目录中创建文件.prettierrc
{
  "semi": false, // 格式化是结尾不加分号
  "singleQuote" : true // 单引号代替分号
}
  1. 修改ESLint语法规则.eslintrc.js
rules: {
  'space-before-function-paren': 0 // 禁用函数后面要加空格的格式要求
}

# 4. 命令行方式创建项目

创建项目

vue create my_project

运行项目

npm run serve

# 5. 配置Gitee SSH公钥

ssh-keygen -t rsa -C "yk1123@vip.163.com"

在这里插入图片描述 得到SSH公钥 在这里插入图片描述 复制粘贴进去 在这里插入图片描述 在这里插入图片描述 添加公钥

ssh -T git@gitee.com

Are you sure you want to continue connecting (yes/no)? yes

在这里插入图片描述 成功！

# 6. Gitee 创建仓库 本地同步

在这里插入图片描述 在这里插入图片描述

git config --global user.name "ykang2020"

git config --global user.email "yk1123@vip.163.com"

切换至项目目录启动CMD

检查状态

git status

在这里插入图片描述 添加至缓存区

git add .

添加至本地库

git commit -m "add files"

最后确认状态

git status

在这里插入图片描述

git remote add origin https://gitee.com/ykang2020/vue_shop.git

本地库上传至gitee

git push -u origin master

登录gitee账户 在这里插入图片描述 在这里插入图片描述 完成 在这里插入图片描述

上次更新: 2022/4/21 22:21:34

基本使用