标签：npm vue cnpm 创建 webpack install 安装 搭建
桃之夭夭，思绪纷飞。
一、环境搭建
1.安装node.js（包含包管理工具npm）
安装包可以到node官网进行下载，穿梭>>>
根据自己的操作系统下载相应版本的安装包，运行后按照操作提示进行即可
测试是否安装成功：在命令提示符下输入 ‘node -v、npm-v’，正确显示版本号即为安装成功。
2.安装cnpm（淘宝镜像，可不安装）
由于npm安装插件访问的是国外的服务器，受网络等影响较大，可能会出现无法访问或安装过慢的问题，cnpm为淘宝团队免费提供的完整npmjs.org镜像，以10分钟的频率与官网服务器同步，插件安装稳定、下载速度快
安装：npm install cnpm -g --registry=https://registry.npm.taobao.org / npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后，我们就可以使用cnpm代替npm进行插件的下载等操作
3.安装webpack
模块打包器
命令： npm install webpack -g / 如果安装的淘宝镜像，可以使用 cnpm install webpack -g
可使用‘webpack -v’检查是否安装成功
4.安装vue-cli
vue脚手架，vue.js开发的标准工具，介绍可参考这篇文章>>>vue-cli最全解析
命令：npm install vue-cli -g /如果安装了淘宝镜像，可以使用 cnpm install vue-cli -g
检查安装： Vue -V （注意V是大写）
二、创建vue项目
1. 命令：vue init <template-name> <project-name>
模板一般选择webpack即可，项目名称自己起，例如我们起名vuedemo，则安装命令为：vue init webpack vuedemo
安装截图如下：
2.选项介绍
> Project name：项目名称，可不写默认命令中的项目名，注意不能使用大写字母
>Project description：项目描述
>Author：作者
>Vue build：构建，我们选择runtime+（standalone）即可，还有一个选项是runtime-only
>Install vue-router：是否安装vue路由，选择是
>Use ESLint to。。：是否用ESLint来限制你的代码错误和风格
>unit tests，单元测试，根据自己项目需要，这里示例项目选no
>Setup e2e。。：是否安装e2e来进行用户行为模拟测试
>Should we run npm。。。：使用哪种方式安装依赖包，有三个npm、yarm、self（后期自己决定），示例项目选择npm
好了，接下来，等待安装完成即可
3.运行
安装完成后，使用命令：cd <project name> 进入项目目录，运行命令 npm run dev
等待出现提示your application is running here：localhost:端口，在浏览器访问，显示如下即可
4.安装过程异常处理
新创建项目报错：npm ERR! Unexpected end of JSON input while parsing near
参考解决方案，传送>>>
我的解决流程：
》删除缓存文件
》执行清理缓存
》重新安装
标签：npm,vue,cnpm,创建,webpack,install,安装,搭建 来源： https://www.cnblogs.com/xihao/p/11382233.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。