使用NPM搭建大型Vue.js项目框架

本文用于记录本人在学习Vue.js过程中的经验，如有后续会及时上传到CSDN。

首先必须下载NPM，NPM是随同NodeJS一起安装的包管理工具，安装完成NodeJS后NPM也会自动安装完成，下面是NodeJS的安装包地址：https://nodejs.org/en/。

Windows端直接安装exe可执行文件，Linux端可使用

apt-get install nodejs

直接下载，也可以下载源码后将源码文件夹内的bin文件夹中的可执行文件软链接到系统可执行文件夹"/usr/bin"或者"usr/local/bin"中。

下载好NodeJS后，在命令行中输入

npm -v

，验证npm是否安装完毕，如果正确显示版本号则确认安装成功。

由于在国内使用淘宝镜像下载文件较慢，故将npm换成淘宝镜像版。命令行中输入

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

，此后便可以使用

cnpm

命令代替

npm

以实现更快速的搭建。

接下来，使用nmp安装Vue：

cnpm install vue

。

全局安装vue脚手架工具 vue-cli

cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

根据提示填写项目基本信息，注意其中有一项ESLint代码规范检查工具最好不要勾选，不然正式写代码的时候打错一个空格或回车程序都会报错，十分痛苦。Atom等编辑器中可以安装插件实现一键代码规范化。

进入项目，安装并运行：

cd my-project
cnpm install
cnpm run dev
           

完成框架的构建。

浏览器输入 http://localhost:8080 即可预览刚刚搭建的网页。