前端项目初始化步骤

用vue、vue-cli、vuex、element-ui、axios、echarts开发后台管理系统

建议提前安装配置好node.js、git，同时建议安装最新稳定版本
我是使用WebStorm，同时大多数命令也是在WebStorm里的terminal中运行

一.安装Vue脚手架

安装：npm install -g @vue/cli
查看版本：vue -V

二.通过Vue脚手架创建项目

1. 在自己指定文件夹下创建项目: vue create vue-project
   
   vuecreate

2. 有自己规范的可以选择自己的，这里我们选择最后一项：Manually select feature，手动配置
   按键盘上下键可以选择,Enter下一步

manually

3. 按键盘上下键可以选择,空格键是选中与取消，A键是全选，Enter下一步

• TypeScript 支持使用 TypeScript 书写源码
• Progressive Web App（PWA） Support PWA支持
• Router 支持 vue-router
• Vuex 支持 vuex
• CSS Pre-processors 支持 CSS 预处理器
• Linter / Formatter 支持代码风格检查和格式化
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试

allselect

4. 回车，询问我是否用router的历史模式，我选的no

5. 配置文件存放地方
   第一个是独立文件夹位置，第二个是在package.json文件里

我选择放单独配置文件，选第一个

6. 回车，询问我是否保存这次选的配置，我选的no（就是第2步自己的规范，我就不再多余保存配置了）

---

三.配置Vue路由

注：在上一步配置中选择了Router的这里就不需要配置了

安装：npm install vue-router
vue-router官方文档
router基本配置和使用

四.配置Element-UI组件库

安装：vue add element
然后：

我选择Import on demand，因为如果全部导入会使项目结构比较臃肿

五.配置axios库

安装： npm install axios

六.初始化git远程仓库

需要先去gitHub和gitee申请账号
创建仓库：

git仓库

git全局配置：

git config --global user.name "肃清"
git config --global user.email "[email protected]"

七.将本地项目托管到GitHub或码云中

在项目目录下：

git status
git add .
git commit -m "add files"
git status

最后会显示：working tree clean

cd existing_git_repo
git remote add origin https://gitee.com/pshawn/vue-project.git
git push -u origin master

刷新查看gitee刚刚创建的仓库，我们本地的仓库已经成功地上传到了远程仓库

八、项目初始化

打开WebStorm终端，按顺序执行：

1. git status
   查看当前工作区是否干净

2. git checkout -b login
   创建分支（比如这里创建login分支）

3. git branch
   查看当前项目所有分支

4. npm run serve
   编译和热更新，查看项目

5. 删除自带的不必要的组件，如Home.vue, About.vue