从零开始系列之vue全家桶（1）安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router

写在前面：

什么是全家桶？

包含了vue-router，vuex， axios。再加上构建工具vue-cli，sass/less样式,和Element UI 这类UI工具，就是一个完整的vue项目的核心构成。

归纳起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。5.其余

axios是一个http请求包，vue官网推荐使用axios进行http调用。

 

1.安装nodejs。

Node.js官方安装包及源码下载地址：https://nodejs.org/en/

选择左边的Recommmended For Most Users的稳定版，一路next，安装完毕。

1.命令行操做：win+r键调出运行，输cmd调出命令行。或者在桌面按住shift键点右键，输w调出命令行。

2.检查Node.js版本看是否安装成功：输入node -v。

 

2.将淘宝镜像cnpm安装，解决npm外国安装过慢问题。

1.打开命令行，输入

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

-g和-global一样都是全局的意思，之后再有新项目都不用再重复操做安装依赖了。安装好之后用cnpm 替代全部npm命令。不过有些时候cnpm会丢包，建议重要的项目仍是用npm。

这里的i就是指的install,之后再也不赘述。

若是安装失败，可使用 npm cache clean 清理缓存，而后再从新安装。后面的安装过程当中，若有安装失败的状况，也须要先清理缓存。

一样可使用 cnpm -v 查看是否安装成功。

 

3.使用 cnpm 安装 vue-cli 脚手架和 webpack。最新的 vue 项目模板中，都带有 webpack 插件，因此这里能够不安装 webpack。

cnpm i -g vue-cli

安装完成后，可使用 vue -V （注意 V 大写）查看是否安装成功。若是提示“没法识别 'vue' ” ，有多是 npm 版本太低，可使用 npm i -g npm 来更新版本

 

4.初始化项目

vue init webpack 项目名称

好比在桌面shift右键调出命令行，输入vue init webpack my-vue ，而后一路回车过去，会默认自动安装vue-router，行使ESLint规范等。

 

5.而后进入项目目录，使用 cnpm 安装依赖

cd my-vue

cnpm i

而后启动项目 npm run dev

浏览器打开输入：http://localhost:8080 

 

6本身的项目文件都须要放到 src 文件夹下

 

 

7.项目开发完成以后，能够进行打包工做

npm run build

打包完成后，会生成 dist 文件夹，若是已经修改了文件路径，能够直接打开本地文件查看

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