媒介

人间万难 不过一拖二懒三不念书 对 说的就是我

倏忽以为这句话说的很对，自从上次写完nodejs装置及npm全局模块途径的设置已过去两月有余，而我的vue框架进修也就止步于此。照样没有给本身施加压力，胡里胡涂的又度过了这么长时间，想一想就很内疚。(实际上是懒癌患者)也许本身照样个少年吧，比较旁皇。

进修真的是本身的事，本身不想学，自制力不够，半点不由人。毕竟学无止境，而且手艺的更新速率又非常快，应该时候坚持畏敬之心。固然也不是一件事没做，近来在看《JavaScript设想形式》(张容铭著)一书，收成颇多。关于JavaScript的面向对象有了更深的看法，对原型及原型链，以及对象的封装、继续、多态有了新的熟悉。但本日的重点不在于此，只是想经由过程写文章纪录下本身在vue框架进修上的积聚。

起首装置node.js并设置其环境变量

这里我就不多说了，毕竟上篇文章已写的很清晰了。请戳：nodejs装置及npm全局模块途径的设置，装置设置完成后，为了考证装置是不是准确，请window+r，输入cmd，快速翻开cmd掌握台后，在敕令行输入以下内容：

// 检察node装置是不是一般
node -v 
// 回车后看到输出当前装置node的版本号，比方：v8.11.1，即装置一般

因为现在nodejs中已集成了npm，所以我们在敕令行输入以下内容，便可检察npm是不是装置。

// 检察npm装置是不是一般
npm -v 
// 回车后看到输出当前装置npm的版本号，比方：5.6.0，即装置一般

经由过程以上步聚，申明已装置完nodejs并能一般运转。

其次装置vue、vue-cli脚手架和webpack打包东西

第一步已装置完node及npm包管理东西，接下来就很好办了，直接在cmd敕令行中输入：

1.装置vue

// 下载装置vue
npm install vue -g （-g示意装置全局模块的意义）

2.装置vue-cli

// 下载装置vue-cli脚手架
npm install vue-cli -g （-g示意装置全局模块的意义）

3.装置webpack

// 下载装置webpack打包东西
npm install webpack -g （-g示意装置全局模块的意义）

至此，以上三行敕令示意将vue、vue-cli、webpack三个模块装置到了npm包管理东西设置后的全局途径中。

再次用vue-cli脚手架搭建vue项目

第二步将vue、vue-cli、webpack模块装置完成后，就能够运用以下敕令建立vue项目了。

// vue init <template-name> [project-name]
vue init webpack vue-web

// 回车后有以下内容须要填写
Project name (vue-web)    // 项目名称
Project description (this is my first vue project)     // 项目形貌（能够自行形貌一段话）
Author (liwei)    // 项目作者
Vue build (standalone)    
Install vue-router? (Yes)    // 装置vue路由
Use ESLint to lint your code? (Yes)   
Pick an ESLint preset (none)
Set up unit tests (No)    // 单元测试
Setup e2e tests with Nightwatch? (No)    // 单元测试
Should we run `npm install` for you after the project has been created? (recommended) (npm)

cmd敕令行填写完后直接回车就能够建立项目名称为vue-web的项目了。

末了磨练vue项目是不是建立胜利

起首在cmd敕令行中先进入到vue项目地点的途径下，然后输入：

// 装置package.json中的依靠
npm install 

// 运转项目
npm run dev
// 敕令行显现无非常，然后能够在浏览器翻开http:localhost:8080/#/检察效果

// 项目打包宣布
npm run build（临时不做过量引见）

小结

经由过程以上步聚，就能够完成vue-cli合营webpack搭建vue项目的开辟。固然，开辟的过程当中存在不少要填的坑，实在每走一步，都是很胜利的。

你必需不停地奔驰 才留在原地

共勉。