vue之使用nodejs，webpack，vue-cli搭建项目

vue之使用nodejs，webpack，vue-cli搭建项目

在nodejs环境和各种工具的帮助下你可以使用es6语法，，模块来开发web应用，使更加工程化。

一、安装nodejs

打开nodejs官网

选择左边推荐版本 ，下载安装。

安装完成后，打开cmd，输入node -v ，检查是否已经安装成功。显示版本号即表示成功安装了。

这里要插入介绍一下 npm(node package manager)node自带的包管理器，可简单理解为它是帮助你下载安装或卸载包的工具。

输入 npm -v 可以检查npm版本

注意：我是已经安装过的了，版本号可能和大家下载的不一样。

二、安装vue-cli

vue-cli是搭建vue项目的脚手架。使用它可以快速形成项目的基本结构。

用npm全局安装vue-cli

install 即安装，“ -g ” 代表全局安装。

安装完vue-cli后可输入 vue -v 查看版本，注意这里的 “ -v ” 是大写的v。

注意：我是已经安装过的了，版本号可能和大家下载的不一样。

三、创建项目

使用vue-cli 创建项目

使用 vue init webpack my-project my-project 是自定义的项目名字，webpack指用webpack来打包

这时候已经下载了项目基本模板，但是没有安装依赖，所以还不能运行。

转到项目文件夹 cd my-project

安装依赖 npm install

稍等一会儿，可能会有点点慢。

如果实在是慢的不行，可以改用淘宝映射

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

安装完后，就可以运行啦。

使用 npm run dev 或者 npm start

这是正在运行中。

显示这个界面时就已经可以了，在打开 https://localhost:8080

这样就已经运行你的第一个vue项目了噢，很简单吧。