Vue.js开发环境搭建及使用webpack创建项目

1.安装node.js

下载并安装node.js (https://nodejs.org/zh-cn/download/releases/) 建议下载v12版本之前的版本，不然有时候编译过程中会报错。

根据提示安装完成node。

验证node.js是否安装成功，打开命令行工具 输入node -v查看

node自带npm包安装工具，查看npm版本 npm -v

可使用 npm -g install npm 命令来更新npm

PS C:\Windows\system32> node -v
v11.15.0
PS C:\Windows\system32> npm -v
6.7.0

2.安装cnpm

安装cnpm（淘宝镜像），就跟maven仓库地址设置为阿里云maven仓库地址一个意思

验证是否安装成功，使用cnpm -v 查看

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

cnpm -v

3.安装vue-cli

安装vue-cli脚手架，可以方便的构建一个vue项目，就像springBoot项目页面可以根据你的需求，生成一个基础版本的springBoot项目

cnpm install -g vue-cli

 到这里，要安装的就完成了，接下来使用webpack构建一个vue项目（webpack是一个模块打包工具，它的作用是把互相依赖的模块处理成静态资源）

4.构建vue项目

D:
cd .\workspace\
vue init webpack vue-demo

使用powershell构建项目时可能遇到禁止运行脚本，使用PowerShell(管理员权限)，运行下面命令

set-ExecutionPolicy RemoteSigned

修改策略以执行prowershell脚本，选择 A 全是，之后等待项目下载，根据提示来选择项目内容

项目名称 Project name vue-demo
项目描述 Project description vue demo project
作者姓名 Author Johnny
单独编译 Vue build standalone
安装路由 Install vue-router? Yes
使用ESlint(可用可不用，用来检查js代码规范) Use ESLint to lint your code? Yes
使用EsLint标准模式 Pick an ESLint preset Standard
设置单元测试 Set up unit tests No
设置测试 Setup e2e tests with Nightwatch? No
使用npm还是yarn构建(选npm) Should we run `npm install` for you after the project has been created? (recommended) npm

5.运行项目

构建完成后，按照提示，进入项目目录，然后运行命令 npm run dev

cd vue-demo
npm run dev

打开浏览器输入

http://localhost:8080 

查看结果