Vue2.5 脚手架配置

最近几年前端框架大放异彩，目前Vue、React、Angular框架已经三分天下，Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统，vue,js是款轻量级、入门容易、学习成本比较轻的框架。

一、安装环境

1.安装node.js，从node.js官网下载并安装node，node会自动安装npm包的，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

2.安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

3.安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

安装成功

二、创建工程

1.从本地创建一个文件夹，名字随意，我这里是的项目名字是Project

2.进入Project文件夹，我安装github直接右键点击，

3.直接上手命令行 输入vue init webpack Project

4.第一个红圈问是否安装路由  一般我都是选yes，第二个是启动语法检测 我直接选no，然后直接默认下一步下一步就好了，最后就会加载一个项目工程出来。

6.进入文件夹后 我们执行npm run dev 的命令；

7.加载后就会跳出一个路径，到浏览器执行就会出现主界面；首次要手动加载

默认端口号是8080

8.项目基本结构

9. 打开webStorm修改自动启动页面，config/index.js第18行代码值改为true即可

10.index.js文件中第46行代码加个小数点，这是打包图片路径问题

11.utils.js第48行代码块retuen里面添加 publicPath:'../../'  句代码

12.输入打包命令 npm run build 就会执行打包，产生一个dist文件夹

Vue-cli 脚手架项目基本搭配好了，还有注意一点 就是端口号问题，我们一般默认是8080端口，若8080端口被别的程序所占用，可以在config/index.js第17行port修改。