概述
本系列为小连载，记录一个前端攻城狮对项目的孵化过程，内容包括开发环境，项目搭建，项目工程化等，其中项目工程化为主要部分。以基本的社交电商类网站为标准做工程化，包括但不限于路由配置，axios配置，全局数据配置，共通文件，工具文件，包外单配置文件，vue组件等。旨在传递工程化经验与思想。希望读者阅读前比较了解Vue，甚至使用过Vue其他的全家桶和IDE开发过demo。本篇文章的性质更接近于简易操作手册，有一定经验的人可以按照手册，快速搭建一个基本的工程化Vue项目。作者本人技术还有很多不足，因为网上的前端教学大都过时或过于分散，我决定写一个小连载类的文集。希望最终能生成一个方便学习和开发借鉴的模板项目。如果在接下来的文章有错误的地方，欢迎在评论区指出，我会及时改正的。
开发环境
IDE：JetBrains WebStorm 2018.2 x64
(有能力的请支持正版，先从官网下载软件本体，破解补丁推荐使用JetbrainsCrack-2.10-release-enc.jar，低版本破解补丁可能会闪退。不会破解的百度‘webstorm2018‘，某JB之家下面写的挺详细的，补丁包直接搜索‘JetbrainsCrack-2.10-release-enc.jar’应该就能找到。结尾点题，有能力的请支持正版，webstorm真的做的很好。不推荐打汉化补丁。)
工具脚手架等：node.js npm webpack vue-cli git
(这些到官网下载安装都免费的，vue-cli在下载完node后使用npm全局安装，npm现在下载node会捆绑一个，安装后别忘了配置环境变量，没安装过的可以去百度'软件名'+'安装教程')
技术栈：Vue Vue-router Vuex axios
(构建项目时自动安装的，或者构建后通过npm等包管理工具安装，不用急)
项目搭建
打开webstorm新建项目。
如果你node和webpack都安装了并且配置了环境变量，那么应该都自动填好了，接下来多点几次next就可以了
图1.webstrom-file-new-project
创建过程会提示安装一些常用包，不懂得可以百度下再选择是否安装，或者全部选 yes/默认项 就可以了。
图2.创建过程会提示安装一些常用包
使用npm还是yarn等包管理工具的选项，一半用npm较多，现在安装node时多会一同安装npm。
图3，选择npm包管理工具
最后完成，你将创建好了一个空的项目，右击选择package.json，选择show npm script 如图4
图4.展示框
双击dev开启测试运行，接口默认8080，如果已占用会自动换下一个接口（比起eclipse很智能），如图5
图5.运行测试服务
浏览器打开控制台提示的网址（蓝色那部分http://localhost:808X）。或者直接点击蓝字会默认浏览器打开。
显示如图6的网页，则证明你之前的操作基本正确。
图6.正确显示的空项目
安装vuex，axios。
打开项目目录文件夹，（需要安装git，没安装git的也可在IDE控制台执行命令）右键选择git base here 执行npm install vuex --save与npm install axios --save即可安装完成。
安装完成后一定要在直接或者间接在main.js中导入。导入举例在下一篇中有讲解。至此我们基本需要东西基本安装完成。如图7。
图7.gitbasehere安装vuex与axios
项目工程化目录
接下来的操作并不是你必须这样做，但这样做会是你的项目有更好的结构，有助于后期开发维护，某些公司可能会有自己的工程化习惯，但工程化思想基本一致。旧的老的项目可能工程化不完善，这会影响二次开发与维护。如果要做新的项目，最初的工程化对之后的开发效率有决定性的影响。
工程化项目目录概述
如图2-1左框，这个下项目结构我会从上到下讲解一哈。根目录下我们主要编辑部分在src、static、index.html。src之上一般有build、config、node_modules三个文件夹，内含打包脚本，配置文件，工具包等，很少编辑。目录中图上有的而你新建的项目没有就说明那是我新建的，你也跟着新建目录或者文件就可以了。
src-assets中通常会存放一些静态文件，但请优先使用static文件夹存放、或者云存储。assets中存放的图片等在之后封装打包可能会产生问题。
src-components中存放vue文件，项目创建后这里有一个hollowword.vue，我们先不管这个文件。这个目录下我们至少需要再创建两个子目录，如图，我创建了page存放显示页面的vue，又创建了component存放vue组件。
src-myAxios这个目录是我创建的，用来存放二次编辑的axios.js文件，文件夹中只有axios.js。这个文件的下面会详细讲解。
src-router中只有index.js，是路由配置文件，路由配置目前我主要使用过两种写法。下面会详解。
src-App.vue是随项目生成的底层vue文件，其中router-view作为视图显示位置。基本只在项目创建初编辑。
src-main.js是随项目生成的底层js文件，导入工具包，设置路由钩子，新建vue全局变量等在这里操作。
static下的css，img，js都是我新创建的，用来存放全局静态文件。
static-css-main.css是我创建的全局初始化css。用来清除浏览器默认样式，这里应该有公司使用的初始化css或者自己常用的初始化css。浏览器样式初始化应该是前端开发的基础，这里后面不再详解了。
static-config.js是静态单文件配置。作为不打包的配置文件，在不重新打包项目的情况下修改项目一些状态。
index.html是项目的本体，单页面网站项目实际是对index.html渲染产生复杂的结构。在此页面可使用script标签导入第三方js。并且应该在此页面设置meta和title等。项目创建初修改后很少编辑。
图2-1.工程化目录及导入式路由配置
下一篇：Vue全家桶工程化技术栈
网友评论