首先是下载一个node.js安装包。目前就下最新的吧。(下载最新版本可能要降版本),然后安装cnpm的淘宝镜像。安装之前建议参阅npm的安装机制。
本文档参考自:Jinkey原创Vue2.0 新手完全填坑攻略,gh254172840的博客
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果你是最新版本会报错:
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
解决办法:降低版本:
npm install [email protected]4.6.1 -g
然后安装webpack和脚手架(一步步来):
cnpm install webpack -g npm install vue-cli -g
在硬盘上找一个文件夹放工程用的,在终端中进入该目录
cd 目录路径 或者 cd /d 目录路径
根据模板创建项目
vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
会有一些初始化的设置,如下输入:Target directory exists. Continue? (Y/n)
直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)Project name (vue-test)
直接回车默认Project description (A Vue.js project)
直接回车默认Author
写你自己的名字
cd 命令进入创建的工程目录再安装项目依赖
这次是在项目里面安装而不是全局安装npm、cnpm路由模块以及网络模块,一步步来:
npm install cnpm installcnpm install vue-router vue-resource --save
装npm的时候可能会报错
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
这只是一个警告,因为该模块与Windows不兼容。你可以放心地忽略它。这是可选的。
如果是这样不断的ERR:
这种是node_modules安装问题,执行以下(参考文档):
rd /s /q node_modules rd /s /q package-lock.json npm cache clear --force npm install
没有报错,那么可喜可贺进行下一步。如果你用的是老版本的 vue-cli 还可能报其他错误,需要更新一下 vue-cli:
npm update vue-cli
最后启动项目
npm run dev
然后安装其它依赖。
cnpm install opn --save-dev cnpm install webpack-dev-middleware --save-dev cnpm install express --save-dev cnpm install compression --save-dev cnpm install sockjs --save-dev cnpm install spdy --save-dev cnpm install http-proxy-middleware --save-dev cnpm install serve-index --save-dev cnpm install connect-history-api-fallback --save-dev
其中webpack-dev-middleware会报错:
peerDependencies WARNING [email protected]* requires a peer of [email protected]^4.0.0 but [email protected] was installed
我暂时无视掉了。
其它坑见:runoob.com
原文地址:https://www.cnblogs.com/a5211083/p/9023110.html