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

安装流程 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。时间略长。
【环境搭建Vue开发环境|环境搭建Vue开发环境 (包括webstorm开发)】输入 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 node-sass@4.14.1
//查看版本
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