Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue 官网:https://cn.vuejs.org/
一、安装node环境
Vue的运行时基于node环境,并且Vue还需要依赖node的npm包管理工具的,所以首先要安装node。
node下载地址-> https://nodejs.org/en/
根据需要下载安装包进行安装即可,安装完毕后打开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信息,说明安装成功
四、创建新项目
选择要创建项目的磁盘,新建文件夹【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,即可访问搭建好的项目页面