Vue小白入门项目之商城项目初始化(一)

1. 前端项目技术栈

• Vue
• Vue-router 路由
• Element-UI 前端UI组件库
• Axios 发起网络请求
• Echarts 绘制相关图形报表

2. 后端项目技术栈

• Node.js
• Express
• Jwt 状态保持工具，模拟session那样的登录记录功能
• Mysql
• Sequelize 操作数据库的框架

3. 项目初始化

3.1 前端项目初始化步骤

1. 安装Vue脚手架
2. 通过Vue脚手架创建项目
3. 配置Vue路由
4. 配置Element-UI组件库
5. 安装和配置axios库
6. 初始化git远程仓库
7. 奖本地项目托管到Github或者码云中

下面进行项目创建
cmd打开命令行，在命令行中输入 vue ui，打开vue 图形化界面，自动跳转到浏览器

点击创建，选择存放的项目路径，然后创建项目

点击下一步，可以选择之前创建过得vue项目的预设，或者选择手动形式，进行预设设置。接下来将以手动的方式进行Vue项目的配置。

点击下一步后，会进入功能面板，可以选择一些想要的功能。

打开即代表要安装，首先，Babel、Router、Linter/Formatter(进行代码的格式校验)、使用配置文件（将不同的配置，单独存放为一个配置文件）

点击下一步，进行如图配置

然后点击创建项目。

出现一个弹框，可以把以上设置保存为一个预设，也可以不保存。
最终效果如下图，此时前三步已经完成。

接下来，第四步操作：打开项目”仪表盘“，选择“插件
右上角添加插件，然后输入要安装的插件，比如vue-cli-plugin-element然后
选中(记住图标)，点击右下角的安装即可

修改一下配置

第五步：打开依赖，点击右上角的安装依赖。

然后搜索框输入axios，选中，注意要点击到运行依赖。然后进行安装