脚本宝典收集整理的这篇文章主要介绍了使用vue-cli脚手架+webpack搭建vue项目，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
世间万难 无非一拖二懒三不读书 对 说的就是我
突然觉得这句话说的很对，自从上次写完nodejs安装及npm全局模块路径的设置已经过去两月有余，而我的vue框架学习也就止步于此。还是没有给自己施加压力，浑浑噩噩的又度过了这么长时间，想想就很愧疚。(其实是懒癌患者)或许自己还是个少年吧，比较彷徨。
学习真的是自己的事，自己不想学，自制力不够，半点不由人。毕竟学无止境，而且技术的更新速度又非常快，应当时刻保持敬畏之心。当然也不是一件事没做，最近在看《JavaScript设计模式》(张容铭著)一书，收获颇多。对于JavaScript的面向对象有了更深的见解，对原型及原型链，以及对象的封装、继承、多态有了新的认识。但今天的重点不在于此，只是想通过写文章记录下自己在vue框架学习上的积累。
这里我就不多说了，毕竟上篇文章已经写的很清楚了。请戳：nodejs安装及npm全局模块路径的设置，安装设置完成后，为了验证安装是否正确，请window+r，输入cmd，快捷打开cmd控制台后，在命令行输入以下内容：
// 查看node安装是否正常
node -v
// 回车后看到输出当前安装node的版本号，例如：v8.11.1，即安装正常由于目前nodejs中已经集成了npm，所以我们在命令行输入以下内容，就可查看npm是否安装。
// 查看npm安装是否正常
npm -v
// 回车后看到输出当前安装npm的版本号，例如：5.6.0，即安装正常通过以上步聚，说明已经安装完nodejs并能正常运行。
第一步已经安装完node及npm包管理工具，接下来就很好办了，直接在cmd命令行中输入：
// 下载安装vue
npm install vue -g （-g表示安装全局模块的意思）// 下载安装vue-cli脚手架
npm install vue-cli -g （-g表示安装全局模块的意思）// 下载安装webpack打包工具
npm install webpack -g （-g表示安装全局模块的意思）至此，以上三行命令表示将vue、vue-cli、webpack三个模块安装到了npm包管理工具设置后的全局路径中。
第二步将vue、vue-cli、webpack模块安装完成后，就可以使用以下命令创建vue项目了。
@H_882_126@// 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的项目了。
首先在cmd命令行中先进入到vue项目所在的路径下，然后输入：
// 安装package.json中的依赖
npm install
// 运行项目
npm run dev
// 命令行显示无异常，然后可以在浏览器打开http:localhost:8080/#/查看结果
// 项目打包发布
npm run build（暂时不做过多介绍）通过以上步聚，就可以完成vue-cli配合webpack搭建vue项目的开发。当然，开发的过程中存在不少要填的坑，其实每走一步，都是很成功的。
你必须不停地奔跑 才能留在原地
共勉。
以上是脚本宝典为你收集整理的使用vue-cli脚手架+webpack搭建vue项目全部内容，希望文章能够帮你解决使用vue-cli脚手架+webpack搭建vue项目所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。