vue 完整项目配置

注意：Vue 不支持 IE8 及以下版本，因为它使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。
前提：安装最新版的 node.js (自带配置且安装好npm)

1.安装node.js

Node.js安装包及源码下载地址：https://nodejs.org/en/download

Node.js历史版本下载地址：https://nodejs.org/dist

2.安装vue 

//方法1.安装依赖库 vue(默认最新版本) 
npm install vue                                         //回车后执行
//方法2.安装指定版本的 vue, element 库和 vuex, axios 库
npm install vue@2.1.6 element-ui@1.4.6 vuex axios       //回车后执行


//查看版本
node -v                     //回车后查看 node.js 版本
vue -V                      //回车后查看 vue.js 版本(注:这里的V是大写)

3.使用CLI搭建 SPA 脚手架

//安装依赖库和命令行工具
npm install vue@2.1.6 element-ui@1.4.6 vuex axios    //回车---安装依赖库，建议指定 vue 和 element 版本，避免版本升级带来意料之外的 bug  
npm install -g vue-cli                               //回车---全局安装 vue 命令行工具

//选择项目的安装路径,若省略此操作则默认安装到 C 盘, cd.. 表示返回上级
d:                                                   //回车---选择D盘 
cd test                                              //回车---选择D盘的test文件夹

//创建vue项目 (后续创建vue项目只需操作以下步骤)
vue init webpack myProject                           //回车---创建一个基于 webpack 模板的新项目myProject

//等待下载完成后,配置项目基础项
Project name (myTest)                                //项目名称，可不用书写直接回车
Project description (A Vue.js project)               //项目描述，可不用书写直接回车
Author (iwen <iern@iwens.ort>)                       //项目作者，可不用书写直接回车
Vue bulid(Use....)                                   //回车
Install vue-router?(Y/n)                             //是否安装路由，     输入 Y 回车
Use ESLint to lint your code?(Y/n)                   //是否安装代码检查， 输入 n 回车(需要时选择 Y )
Set up unit tests (Y/n)                              //是否安装单元测试， 输入 n 回车(需要时选择 Y )
Setup e2e tests with Nightwatch?(Y/n)                //是否安装e2e测试，  输入 n 回车(需要时选择 Y )
/*
  这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader就会配套下载。
  所以如果我们确定不用的话最好不要yes，不然下一步要下很多没有用的loader
*/

cd myProject                                         //回车---进入项目目录
npm install                                          //回车---安装依赖
npm run dev                                          //回车---运行项目

//然后提示: (打开页面网址即 http://localhost:8080)
Your application is running here:http://localhost:8080   

以上vue 环境搭建以及项目创建流程，下一篇主要介绍项目的基本结构与配置，以及打包注意事项。

传送门：

vue项目配置2-项目目录结构,vue打包白屏,图片加载不出等问题

vue项目配置3-router路由配置，元信息meta的使用-登录拦截验证

vue项目配置4-Vuex状态管理-Vuex使用详解

vue项目配置5-axios请求 配置