二、搭建Vue项目详解

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

 
 

一、安装node环境（vued的环境依赖）:

 

1、第一步：node.js安装:

简单来说，node是一个运行环境，是vue的运行环境，vue的运行是要依赖于node的npm的管理工具来实现。所以搭建项目前一定要先安装node.js。
 
node.js安装步骤详解：https://blog.csdn.net/TTDreamTT/article/details/110941818

 

2、第二步：安装npm

npm相当于一个仓库库。npm是前端依赖包管理器，它类似maven，帮助下载和管理前端的包，这个下载源是外国服务器，如果想提高下载速度的话，建议更换成淘宝镜像，类似maven之于阿里云镜像。
npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

 

3、第三步：安装cnpm：

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm。

我们这里为了提高效率，可以使用淘宝的镜像：http://npm.taobao.org/
 
输入命令：

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

即可安装npm镜像，没报错表示安装成功，完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

 
 

二、搭建vue项目环境：

 

1、第一步：全局安装vue-cli 脚手架构建工具

 
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

安装命令：

 npm install --global vue-cli

验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

 

2、第二步：进入你的项目目录，创建一个基于 webpack 模板的新项目

 
搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，尽量不要装在C盘，因为vue下载下来的文件比较大。
首先我们进入自己工作空间目录下：D:\workspace\vuework，然后我们开始创建新的项目输入命令：vue init webpack my-project 回车，my-project 是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-router。

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的：

说明：

• 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 my-project 回车，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，

输入命令：cnpm i

安装成功后，项目文件夹中会多出一个目录：　node_modules

 

4、第四步：启动项目

 
启动项目命令：npm run dev

项目启动成功：

 
 

三、目录讲解

 

1、build：构建脚本目录：

• build.js ==> 生产环境构建脚本；
• check-versions.js ==> 检查npm，node.js版本；
• utils.js ==> 构建相关工具方法；
• vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
• webpack.base.conf.js ==> webpack基本配置；
• webpack.dev.conf.js ==> webpack开发环境配置；
• webpack.prod.conf.js ==> webpack生产环境配置；

 

2、config：项目配置目录：

• dev.env.js ==> 开发环境变量；
• index.js ==> 项目配置文件；
• prod.env.js ==> 生产环境变量；

 

3、node_modules：

• npm 加载的项目依赖模块

 

4、src目录：

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

• assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
• components：组件目录，我们写的组件就放在这个目录里面；
• router：前端路由，我们需要配置的路由路径写在index.js里面；
• App.vue：根组件；
• main.js：入口js文件；

 

5、static目录：

• 静态资源目录，如图片、字体等。不会被webpack构建。

 

6、index.html：

• 首页入口文件，可以添加一些 meta 信息等。

 

7、package.json：

• npm包配置文件，定义了项目的npm脚本，依赖包等信息。

 

8、README.md：

• 项目的说明文档，markdown 格式。

 

9、.xxxx文件：

• 这些是一些配置文件，包括语法配置，git配置等。

 
 
致此，vue项目搭建完成！！！

 
 
 

致谢：

参考资料：https://www.cnblogs.com/yanxulan/p/8978732.html
参考资料：https://www.cnblogs.com/winter92/p/7117057.html