4.1、使用 Vue-CLI 构建 Vue 项目

一、安装 Vue-CLI

在前面已经安装好了 Nodejs 并配置了国内开发环境，接下来安装一个全局 vue-cli：

安装脚手架工具：

npm install --global vue-cli
#或 npm install -g vue-cli

如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装

二、使用 webpack 生成项目

如果没有webpack可以顺便装一个 npm install -g webpack 安装全局的，用起来也方便

安装 web-pack：

npm install -g webpack
npm install -g webpack-cli

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack vue-ui-demo

安装依赖

npm install
//or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

本地开发 开启服务

npm run dev

发布

发布测试环境 带 webpack ananalyzer

npm run build:sit-preview

构建生成环境

npm run build:prod

三、npm 更新依赖组件版本

先检查更新

npm outdated

执行以上命令，可以看到所有可以更新的模块。
我们需要先更新 package.json文件：
安装”npm-check-updates”模块

npm install -g npm-check-updates

检查可更新的模块

ncu
npm-check-updates

以上两条命令都可检查可更新模块。接下来更新package.json的依赖包到最新版本：

ncu -u

以上命令执行，更新全部模块。但在实际开发中不建议一次全部更新，可以根据实际需要，更新指定的模块，并且可以根据作用范围在后面加上 -D、-S 或 -g

npm update xxx

注意：指定更新需要提前修改 package.json 中的版本号。

为了保险起见，package.json 更新后，可删除整个node_modules目录并重新初始化项目。

npm install

删除

删除指定模块；

npm uninstall xxx 

删除全局模块

npm uninstall -g xxx

查看

查看全局安装的包

npm list -g --depth 0