环境搭建Vue开发环境 (包括webstorm开发)

安装流程

1.安装node.js (https://nodejs.org/en/)

一直下一步即可

输入 node -v   >  返回版本号 安装成功

2.基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

输入 node -v   >  返回版本号 安装成功

3.安装webpack

利用cnpm安装webpack 命令行语句为cnpm install webpack -g  。时间略长。

输入 webpack -v   >  返回版本号 安装成功

4.接下来就是全局安装vue-cli。时间略长

安装语句为：cnpm install --global vue-cli

验证命令:vue -V (V要大写)

安装成功

5.创建项目

D:\>cd D:\2\vue     找到相应文件夹

D:\2\vue\sound>vue init webpack sound  创建文件夹名为sound 的vue项目

在cmd 里面输入 vue init webpack vue_test（项目文件夹名称）回车 等一小会  一次进行下面的操作

              Vue build ==> 打包方式，回车即可；

　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

6.安装依赖

cd vue_test   ->找到相应文件

npm install   /  cnpm install   /  cnpm i    ->安装依赖

npm run dev    / yarn serve  / npm run serve  ->运行项目

Your application is running here:   http://localhost:8080

运行成功

7.打包

npm run build / yarn build

测试安装

node -v 

npm -v 

yarn -v

webpack -v

vue -V

bug修复

Error:Node Sass version 5.0.0 is incompatible with ^4.x 问题解决

此错误来自sass-loader.因为node-sass@latest为v5.0.0,而sass-loader期望值为^4.0.0

目前解决方案如下：

//卸载 node-sass

npm uninstall node-sass

//然后安装最新版本（5.0之前）

npm install [email protected]

//查看版本

node-sass -v

安装yarn

npm install yarn --save

yarn install

安装less依赖

npm install less less-loader --save

终端运行 

菜单栏 

view->tool windows->terminal 

webstorm全局搜索 Ctrl + Shift + R