如何搭建一个完整的Vue项目？

如何搭建一个完整的Vue项目？

---

一、安装node环境

1、安装node环境：下载地址：https://nodejs.org/en/
2、安装淘宝镜像

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

3、检查否安装成功：

node -v
cnpm -v

二、搭建vue项目环境

1、使用以下命令全局安装vue-cli

npm install -g vue-cli
或者使用国内的淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

2、使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。
打开cmd命令框输入：

vue init webpack '项目名'

说明：

Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车（建议Y）；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
3、进入项目：cd 项目名称目录下、 npm run dev，启动项目
4、 以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了。

三、开始我们的第一个vue项目

1、在components目录下新建一个views目录，里面写我们的vue组件
2、开始我们的第一个组件：
3、在views目录下新建First.vue
4、在router目录下的index.js里面配置路由路径
5、 完成后运行npm run dev 就可以看到项目的效果了。

总结

以上就是今天要讲的内容，本文简单介绍了vue项目创建过程，以及所依赖的环境安装及运行，希望对各位有所帮助。