如何搭建一个vue项目(完整步骤)

介绍：Vue CLI←点击此处跳转至官方文档

Vue CLI是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

一、首先要确认自己电脑上以及安装了nodejs

为什么我们要安装nodejs ？
原因：
1、vue.js 是通过 webpack来打包，而webpack 又基于 npm, npm需要nodejs环境。这就是为什么vue.js 还需要安装nodejs环境。
2、将目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上，访问页面可以正常响应逻辑。这时跟nodejs没有任何关系，服务器又不是nodejs在担当，而是nginx。如果你用nodejs来部署服务器，则需要在目标机上安装nodejs.
3、简单的说：你既可以开发nodejs的服务程序，亦可以用基于nodejs的npm && webpack来打包 目标前端页面。vue.js 使用webpack来打包，故而需要nodejs环境。

1、下载地址为：https://nodejs.org/en/
2、node -v检查是否安装成功：如果输出版本号，说明我们安装node环境成功
3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/
　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。
4、node -v检查是否安装成功：

二、搭建vue项目环境

1、使用以下命令全局安装vue-clinpm install -g vue-cli 或者使用国内的淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org

2、使用命令 vue init webpack skp-demo 搭建vue项目, “skp-demo” 是你的项目名称。这里用skp是因为我刚好想仿照skp的主页写一个前端练练手。
我使用的是Vue-CLI 2.x版本。

说明　
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 ；

创建成功之后这里我们可以看到使用cd “项目名称” 进入项目目录
使用npm run dev 运行项目

3、进入项目：cd skp-demo目录下、 npm run dev，启动项目
这里我的文件名称叫做skp-demo，所以你们应该改为自己所创建的项目名称。

运行项目 进入自己所创建的项目下输入npm run dev

回车运行：效果如下

在网址中输入：http://localhost:8080即可进入我们创建的项目里了

4、 以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了。
1、build：构建脚本目录
　　　　1）build.js ==> 生产环境构建脚本；
　　　　2）check-versions.js ==> 检查npm，node.js版本；
　　　　3）utils.js ==> 构建相关工具方法；
　　　　4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
　　　　5）webpack.base.conf.js ==> webpack基本配置；
　　　　6）webpack.dev.conf.js ==> webpack开发环境配置；
　　　　7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
　　　　1）dev.env.js ==> 开发环境变量；
　　　　2）index.js ==> 项目配置文件；
　　　　3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
　　　　2）components：组件目录，我们写的组件就放在这个目录里面；
　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；
　　　　4）App.vue：根组件；
　　　　5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、 .xxxx文件：这些是一些配置文件，包括语法配置，git，svn配置等