Vue项目环境搭建

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue 官网：https://cn.vuejs.org/

一、安装node环境

Vue的运行时基于node环境，并且Vue还需要依赖node的npm包管理工具的，所以首先要安装node。

node下载地址-> https://nodejs.org/en/

下载安装node

根据需要下载安装包进行安装即可，安装完毕后打开cmd命令行窗口，输入 node  -v 来查看是否安装成功，若安装成功即会显示 node 版本号，输入 npm  -v 查看npm版本，如下图所示：

查看版本信息

二、全局安装webpack

命令行窗口输入以下命令进行全局安装

npm install webpack -g

三、全局安装 Vue-cli 脚手架工具

Vue-cli 官网：https://cli.vuejs.org/zh/

Vue-cli是由Vue官方提供的专门用于快速搭建单页面应用项目的脚手架工具。

在命令行窗口输入以下命令进行全局安装

npm install -g vue-cli

命令行窗口输入 vue  回车，出现vue信息，说明安装成功

安装Vue-cli

四、创建新项目

选择要创建项目的磁盘，新建文件夹【myProject】，进入myProject文件夹，按住shift键，同时鼠标右击空白处，点击【在此处打开命令窗口】

打开命令窗口

在命令窗口输入命令 ‘ vue init webpack 项目名称 ’  回车，如下

vue init webpack first-vue-project

创建项目

创建完成后的显示信息如图

创建完成

五、进入项目文件夹安装依赖

创建完项目后，首先运行命令进入刚刚创建好的项目文件夹

cd first-vue-project

进入项目文件夹后，由于各模块之间是相互依赖的，所以运行项目前首先要安装依赖包 node_modules，进行初始化，输入下面的命令

npm install

安装依赖

六、运行项目

依赖包安装完成后，输入命令运行项目

npm run dev

运行

运行成功会弹出一个访问的地址

运行成功

在浏览器中输入该地址: http://localhost:8080，即可访问搭建好的项目页面

访问页面