摘要：查看安装是否正常回车后看到输出当前安装的版本号，例如，即安装正常通过以上步聚，说明已经安装完并能正常运行。再次用脚手架搭建项目第二步将模块安装完成后，就可以使用以下命令创建项目了。
前言
世间万难 无非一拖二懒三不读书 对 说的就是我
突然觉得这句话说的很对，自从上次写完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[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项目的开发。当然，开发的过程中存在不少要填的坑，其实每走一步，都是很成功的。
你必须不停地奔跑 才能留在原地
共勉。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96508.html
摘要：后来经过排查你会发现是由于目前还没有版本。可以使用该方式解决。这就是我为什么不推荐你使用创建脚手架的原因此文的受众是想要进阶中级的初级前端人员。 最近在知乎看到一个问题，原问题如下： 很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做...
摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。 如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏 前言 骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...
摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。 如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏 前言 骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...
摘要：前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时，它也为每个工具提供了调整配置的灵活性，无需。例如，如果你的应用被部署在，则设置为。我们将在下篇文章里详细讲述的使用官方文档 前言 通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-se...
摘要：前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时，它也为每个工具提供了调整配置的灵活性，无需。例如，如果你的应用被部署在，则设置为。我们将在下篇文章里详细讲述的使用官方文档 前言 通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-se...
阅读 1922·2021-11-22 15:24
阅读 2091·2021-09-09 11:53
阅读 2836·2021-09-04 16:40
阅读 1499·2019-08-30 15:52
阅读 3248·2019-08-29 13:47
阅读 2607·2019-08-26 17:40
阅读 1320·2019-08-26 13:24
阅读 2141·2019-08-26 12:01
