【VUE】安装搭建项目vue-cli

使用 vue-cli 脚手架搭建项目：vue-cli是官方发布的 vue.js 项目脚手架，快速搭建 vue 项目

一：安装 node.js

安装 node 环境，官网下载安装包（如果安装了，请升级到最新版本的 node）
安装完成后，命令工具行输入 node -v 和 npm -v ，显示版本号，则安装成功

二、安装 vue-cli

全局安装 vue-cli
npm install -g vue-cli

npm安装较慢，所以建议使用淘宝镜像，先设置cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

同样可以使用 cnpm -v 查看是否安装成功，显示版本号则安装成功

下面我们就可以使用 cnpm 来安装 vue-cli 了
cnpm install -g vue-cli

三、生成项目

首先进入你的项目文件夹，例如 vueTask

cd vueTask

然后在此文件夹中创建项目

vue init webpack vue-project

图片.png

配置完成后，可以发现文件夹多出了一个vue-project的文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录（cd vue-project），使用 cnpm 安装依赖
cnpm install

然后启动项目

cnpm run dev

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

图片.png

若要在手机上访问项目，可以将host改为自己的电脑IP地址

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 cnpm run build 来进行打包工作

cnpm run build

打包完成后，会生成 dist 文件夹

项目上线时，只需要将 dist 文件夹放到服务器就行了。