手把手教你搭建 vue 环境

第一步 node环境安装

          1.1 如果本机没有安装node运行环境，请下载node 安装包进行安装
         1.2 如果本机已经安装node的运行换，请更新至最新的node 版本
         下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步 node环境检测

         为了快乐的使用命令行，我们推荐使用 gitbas
         1.1 下载git 并安装
         下载地址 https://git-for-windows.githu...
         安装成功后 右键菜单

         我们可以看到 Gti Bash Here 。说明我们已经安装成功git
         1.2 检测node 是否安装成功
         右键空白，选择 Gti Bash Here 弹出

         1.2.1 在终端输入 node -v

         如果输出版本号，说明我们安装node 环境成功
         随便我们可以查看 npm 的 版本号
         可以使用 npm -v

第三步 vue-cli脚手架安装

         2.1 如果访问外网比较慢，可以使用淘宝的镜像 https://npm.taobao.org/
         打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
         回车之后，我就可以可以快乐的用 cnpm 替代 npm

         看到这样

         恭喜你，你已经成功安装了 cnpm
         但是此后，我们还是使用 npm 来运行命令

         2.2 接下来就是重点了 安装vue-cli
         npm install vue-cli -g

         如果你很幸运，那么接下来就是这样的

         我们成功了

         2.3 进入我们的项目目录，右键 Gti Bash Here
         2.4 初始化项目 vue init webpack vue-demo

         一直回车直到

         是否要安装 vue-router 项目中肯定要使用到 所以 y 回车

         是否需要 js 语法检测 目前我们不需要 所以 n 回车

         是否安装 单元测试工具 目前我们不需要 所以 n 回车

         是否需要 端到端测试工具 目前我们不需要 所以 n 回车

         接下来 ctr+c 结束

         2.5 进入 cd vue-demo

         2.6 执行 npm install

         2.7 创建一个基于 webpack 模板的新项目 vue init webpack project

          如果出现下图，说明安装成功

 

 

         2.8 接下来执行 npm run dev

         2.9如果报错

         刚看到这个错误很迷茫，还去路径下找了找的确没有这个文件。后来恍然大悟，没有在项目路径下。那就改正吧：

         默认浏览器会自动打开

注意：如果您的浏览器是ie9以下的版本，请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问

         恭喜，你已经成功安装，并运行起来vue基础项目，踏入了vue的大门。

 

解决方案:

　　1、试一下 卸载npm uninstall webpack-dev-server，在安装这个npm i webpack-dev-server@2.9.7

　　2、删除node_modules目录，使用npm install，不要用cnpm，npm也是可以设置成淘宝镜像的，cnpm有时候用起来会有很多问题，无名无故的安装些多余的东西。

 

vue cli npm run dev时候报错

如下

$ npm run dev

> vuedemo2@1.0.0 dev C:\Users\Damin\Desktop\vuedemo2
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

'webpack-dev-server' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuedemo2@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuedemo2@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\Damin\AppData\Roaming\npm-cache\_logs\2018-06-14T09_00_40_786Z-debug.log

 

修改如下

1：删除node_modules

2：执行cnpm cache clean

3：cnpm install

4：npm run dev

然后就可以了

 

 

vue项目，svn了前端同事的项目代码，装好环境，运行项目（安装步骤随便百度一下，很详细），控制台里报错“‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件，随机百度解决方法，有的说需要重新装依赖包，有的说扩展用户权限，都做了，但是报错依旧。

随机自己新建一个vue项目（https://segmentfault.com/a/1190000009871504），发现没有报错，于是可以肯定是svn下来的项目代码有问题，最后将项目里的“node_modules”文件夹删除，然后在cmd中cd到项目目录，依次运行命令：npm install和npm run build，最后运行npm run dev后项目成功运行。