搭建VUE从零到一

记录工作中如何搭建一个vue项目的步骤整理

一.安装node环境

1.官网下载node,下载地址为 https://nodejs.org/en/
2.右键打开命令窗，输入node -v 查看node版本以及查询是否安装成功，结果如果出现版本号，则表示安装node环境成功。

3.补充一点：npm安装由于受网络等各种因素影响，会比较慢，所以我们需要再安装一下cnpm(淘宝镜像)来进行提高效率。

淘宝的镜像：http://npm.taobao.org/

命令框中输入 npm  install -g cnpm –registry=https://registry.npm.taobao.org

同理查询 cnpm -v来进行版本的查询，出现版本号，则安装成功

二.搭建vue项目环境

1.我习惯在桌面上创建项目。cmd命令框中全局安装vue-cli

npm install --global vue-cli

2.创建一个文件夹，通过 vue init webpack project 来创建vue项目框架。这里需要操作回车来进行一下选择。

 

说明：

　　　　Vue build ==> 打包方式，回车即可；

　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 

3.项目创建成功后，进入项目：cd project ，安装依赖 npm install /cnpm install.
检查是否安装成功，在project文件夹下会出现node_modules的文件夹。和build文件夹。

4.到目前为止，我们项目创建完成了， npm run dev 启动项目。
项目启动成功标志：一般是8080端口，由于我开着一个8080了，这里就是8081了。

5.浏览器中输入localhos