Vue+vue-cli+webpack前端开发工具入门

本文不讲述Vue的语法、函数等。只是讲述Vue开发前端使用的工具。预先善其事，必先利其器。工具都弄好了才能更好地开发。

1、Vue环境的安装

下载node.js。下载地址：http://nodejs.cn/download/

下载对应的系统、位数、版本号后安装。node.js中自带npm，不需要额外下载npm。

npm在下载速度相对慢，可以安装国内淘宝镜像

命令：

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

安装后下面npm可以换成cnpm

安装完后在window命令窗口（window+R -> cmd）坚持是否安装成功。

2、前端开发工具 --VSCode

下载地址：https://code.visualstudio.com/Download 

安装后在界面上打开终端，这里的终端其实就是window 的命令窗口，同样可以测试node.js 和 npm 的版本号

3、Vue的工具

Vue的环境和开发工具都搭建好之后可以使用Vue-cli的脚手架、创建webpack项目管理Vue工程。

3.1、使用Vue-cli之前需要安装Vue的脚手架，采用npm安装，命令是:npm install vue-cli -g

3.2 脚手架安装好之后可以安装webpack，命令：npm install webpack webpack-cli  -g (会下载最新版本的，版本有需求的在webpack后面加@版本号)

3.3、构建webpack工程

使用vue-cli创建webpack工程：命令vue init webpack project_name

创建成功会有这样显示

运行上面两个命令之后会出现下面这个画面就代表成功，就可以直接使用Vue和其他工具进行开发了。不需要去配置

 

warning:

cnpm 报错解决方案：

报错信息：解决 cnpm : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。引用大佬链接：https://blog.csdn.net/zlw123321/article/details/107133422/

1、在系统中搜索框 输入 Windos PowerShell

2、点击“管理员身份运行”

3、输入“ set-ExecutionPolicy RemoteSigned”回车

4、根据提示，输入A，回车

5、再次回到cnpm -v执行成功。