FLASK+VUE--前后端分离（二）- VUE基础安装及项目的简易介绍

上一章节文档链接：FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现

一、VUE安装-前置条件

1、下载Node.js

访问Node.js官网下载符合当前项目的安装包：https://nodejs.org/en/#download

Node解释：简单的说 Node.js 就是运行在服务端的 JavaScript。它是一个基于Chrome JavaScript 运行时建立的一个平台。

Npm解释：Npm是随同NodeJS一起安装的包管理工具。

安装完成在终端输入两条命令，确认下是否安装成功，及确认相关版本

node -v

npm -v

2、安装镜像

为什么安装镜像：。。。。。说白了就是越狱下载有点慢，可能有的时候会报错。
这里安装的是淘宝镜像，有其他的渠道也可以。

终端输入：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

然后确认下cnpm版本

cnpm -v

3、安装VUE脚手架

sudo npm install -g @vue/cli

确认下脚手架是否安装完成，确认下版本号

vue -V

如果按照步骤走，那么正常来说已经部署好前置条件了。如果报错了。。。。。只能诸位大神百度一下看看有没有其他解决办法了。

二、搭建VUE项目及目录介绍

1、创建项目

vue-cli官方文档：https://cli.vuejs.org/guide/creating-a-project.html

终端输入：vue create hello-world

输入完成后，hello-world项目就创建完成了。

2、目录结构介绍

前置条件：这里用到的编辑器是Vscode：https://code.visualstudio.com/Download（其他的编辑器也可以）

（1）用Vscode打开hello-world项目，会看到下图展示
（2）简易介绍

node_modules  # npm 加载的项目依赖模块

piblic
	--favicon.ico  # 网址logo
	--index.html  # 网站兼容等配置文件
	
src  # 要开发的目录，基本上要做的事情都在这个目录里
	--assets  #  放置一些图片，如logo等
	--components  # 组件文件（可以在这里开发也可以不用，这个都看个人）
	--App.vue  #  项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
	--main.js  # 项目的核心文件
	
.gitignore  # 忽略文件

babel.config.js  # 是项目范围配置（个人是没了解过）

index.html  # 首页入口文件，你可以添加一些信息或统计代码啥的

package-lock.json  # 记录当前状态下实际安装的各个npm package的具体来源和版本号

package.json  # 项目配置文件

README.md  # 项目的说明文档，markdown 格式

vue.config.js  # 配置文件，有的VUE版本没有，在这里我们需要自己手动创建

前后端分离（二）VUE搭建告一段落，下一章节VUE+Element-UI搭建简单的登陆入口