前端-Vue.js的通读使用（一）-构建Vue项目

1、该文章是一个java后端开发人员编写，所以对于Vue项目的结构会以后端开发的思想进行解读，以方便理解前端框架Vue的知识。

 

2、安装node.js。

1、由于Vue框架是基于node.js开发的前端框架，所以需要搭建开发环境。

（类似java开发环境需要安装jdk一样）

2、官网下载地址   http://nodejs.cn/download/    下载完成直接下一步安装即可。

3、通过查看版本命令查看Node.js是否安装成功：

 

3、Node.js切换淘宝镜像。

1、通过命令切换：

（类似java后端maven的setting.xml文件切换淘宝依赖地址一样。）

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

2、这样就可以使用 cnpm命令进行模块的下载了。

（提示：有时候使用 cnpm 命令下载的模块在打包时候会报错，此时最好使用npm进行模块下载）

    4、搭建Vue项目。

1、Vue的基本语法，这里不再描述，可参考官网文档  https://cn.vuejs.org/v2/guide/  

2、真正构建一个Vue项目，需要基于 vue-cli 这个官方脚手架，可以快速生成一个vue项目模板。

  （类似当你用idea创建maven项目时，可以选择不同的项目骨架一样。）

 

3、vue-cli主要功能：

         统一的目录结构、本地调试、热部署、单元测试、集成打包上线。

 4、通过命令，安装vue-cli：

cnpm install vue-cli -g

 安装完成之后，可通过命令 vue list   来查看vue-cli的各种骨架。

因为 vue 本身基于ES6语言，所以我们创建项目需要以webpack进行降级（为了兼容浏览器）和编译，所以创建vue项目的骨架都是webpack。

 5、创建一个基于vue-cli脚手架的vue项目，项目名是：my-project：

vue init webpack my-project

 

 项目初始结构：

在项目中打开cmd，执行命令进行 node_modules 的模块下载：

cnpm install

（以上操作类似java使用idea创建Spring Initializr 项目一样，创建Spring Initializr项目时填写部分信息之后，整个项目结构就已经构架完成，之后maven会自动下载依赖的操作正对应使用命令 cnpm install 下载模块一样。）

（vue项目中的package.json文件类似java中的pom.xml文件，devDependencies节点类似pom.xml文件中的dependencies标签一样。）

启动项目命令：

npm run dev

访问地址： http://localhost:8080

5、vue-cli项目的目录说明。

生成的目录结构如下

文件夹：

  build -- webpack相关配置文件，一般情况下不需要自己配置

  config -- vue基本配置文件，可配置端口号，打包输出等

  node_modules -- 依赖包，也就是运行cnpm install 安装的依赖组件都在这里

  src -- 项目核心文件，自己写的代码基本都放在这里面

  static -- 静态资源，一般图片类资源都放在这里

文件：

  .babelrc -- babel编译参数，不清楚干啥用的，还没学到呢，学到后补充知识

  .editorconfig -- 代码格式

  .gitignore -- git上传需要忽略的文件配置

  .postcssrc.js -- 转换css的工具

  index.html -- 主页

  package.json -- 项目基本信息及项目依赖关系

  README.md -- 项目说明

---

 build目录

build.js -- 生成环境构建

check-versions.js -- 版本检查（node,npm)

logo.png -- vue的logo图片

utils.js -- 构建用相关工具

vue-loader.conf.js -- css加载器配置

webpack.base.conf.js -- webpack基础配置

webpack.dev.conf.js -- webpack开发环境配置

webpack.prod.conf.js -- webpack生产环境配置

---

 

config目录

dev.env.js -- 开发环境配置

index.js -- 项目主要配置，监听端口，打包路径等

prod.env.js -- 生产环境配置

---

 

node_modules目录

存放在这个项目的所有依赖，以后项目根据需要安装的其他依赖也都放在这里

---

 

src目录

assets文件夹 -- 放置静态资源，css，less，lass等样式文件，外部js文件等，也可以放置图片，文档等静态资源

components文件夹 -- 公共组件

router文件夹 -- 路由，配置项目路由

App.vue -- 根组件

main.js -- 入口文件