嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

今天开始我们来做一个电商商城后台管理系统的项目，这是项目起步博文，配好环境，git同步好，我们就开始写项目吧~

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 // 单引号代替分号
}

2. 修改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账户

完成

gitee.com/ykang2020/v…

最后，欢迎关注我的专栏，和YK菌做好朋友~