商城开发笔记-vue环境搭建与配置

Vue简介

其实不用我多说, 人家官网写的比我写的明白, 渐进式JavaScript框架。

那么什么叫渐进式呢? 说白了, 就是用什么功能, 安什么插件, 用哪个就安哪个, 渐进式么, 哈哈。

那么为什么用Vue作为我们这个项目的前端框架呢? 因为开发方便呗, 哪个方便我们就用哪个, 也不扯别的了, 开整!

Vue 环境搭建

其实呢, vue就是一个js文件, 引入就行了, 但是除此之外还有一个东西叫做Vue-cli, 是用来构建交互式项目的脚手架, 基于webpack, 这个是官方文档。

我们现在要来搭建的就是这个脚手架。

首先要先有node环境, 我相信都走到这一步了, node环境肯定是有的, 而且安装也很简单, 就不多解释了。

之后在我们的web项目中新建一个文件夹用来存储前端的文件, 我还是比较传统的将他们放在了webapp文件夹下。

然后使用

npm install -g vue-cli

来安装vue的脚手架, 最后使用

vue init webpack vue_demo

来创建一个基于webpack的vue项目, 这样环境就初步搭建成功了。

Vue项目介绍与配置

先来看看都有哪些目录:

|-- build 包含构建配置文件
|-- config 包含项目配置文件
|-- node_moudles 包含依赖模块
|-- src 项目源代码
|-- static 静态资源文件
|-- |-- .gitkeep 如果有一个空文件夹,但又不希望被git忽略,那么有一个.gitkeep文件,就可以被git进行版本控制
|-- .babelrc es6 转 es5 (babel的配置文件)

其他的文件或者文件夹有用到在介绍, 先说这么多, 把重点放到配置文件上面。

端口号, eslint的启用等等, 都是在config --> index.js 这个文件里面配置, 大家可以自己随便看看。

OK, 整个项目的介绍, 依赖以及相关的配置都介绍完了, 接下来我会慢慢的琢磨业务, 并用这些技术来实现, 嗯。