vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。指档

下载并安装node

下载地址为：https://nodejs.org/en/

在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装，可以使用淘宝的镜像：http://npm.taobao.org/

在终端输入以下命令：

检测cnpm是否安装成功

vue-cli是vue脚手架工具缓租，方便打包，部署，测试等。

进入你的项目目录，创建一个基于 webpack 模板的新扰逗兆项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

网络故障，内存不足。神并

1、vue项目安装连接网络错误服槐亏务器连接github速度很慢，导致下载包超时，会提示过期。

2、vue项目安装需要占据内存，会提示过期是因游明迹为内存不足导致。

上一节安装了flask，我们现在需要安装vue前端框架，需要使用vue-cli方便安装和管理。

先要全局安装vue-cli，可以使用下列任一命令安装这个新的包：

你还可以梁携用这个命令来检查其版本是否正确 (3.x)：

官方文档

已经安装最新版本的vue-cli，我很推荐这个图形化界面，非常方便。

你也可以通过橡备伏 vue ui 命令以图形化界面创建和管理项目：

图形化的界面就不需要多介绍了，有中文都能很好地使用。

使用Vue项目管理器，选择项目地址flask-vue根目录（上节运行flask示滚老例的文件夹），创建新项目名称vue。根据具体需求选择创建条件完成项目创建，自动跳转至项目详情页。

下一节Flask与Vue的关联。

---