Vue前端架构学习(一)
Feb 02, 2018 pm 01:53 PM本文我们主要和大家分享Vue前端架构学习(一),这是一篇从零开始做Vue前端架构的分享,希望能帮助到大家。
想想也已经做过不少架构的项目了,有基于vue,基于react,基于thinkPHP,基于laravel的。做多了,也就对现有的架构有各种想法,有好的,有坏的,总之,用起来还是不爽。vue-cli虽然可以很快地构建并使用,尤其是vue-cli v3.0,把webpack都封进@vue/cli
的sdk里了,用起来更加干净、简洁。
好了,介绍完毕,接下来,我就从零开始,一步一步建起前后端完全分离的前端架构了。
步骤
由于要介绍的很多,全写在一篇里,有些太长了。
所以,我会分为:
创建开发环境下的webpack配置文件
配置eslint、babel、postcss
创建项目文件、目录架构
通过koa实现本地数据接口模拟
创建发布环境下的webpack配置文件
创建测试环境下的webpack配置文件、以及测试用例 (TODO)
自动初始化构建项目(TODO)
这七篇来分别介绍。
开发
一、初始化项目
创建项目文件夹
我们就叫vue-construct
吧
初始化git
git init
初始化npm
npm init
创建项目文件
为了能让webpack跑起来,而不是一口气只讲配置而不运行一下,那样未免有些空洞,所以我们先创建一点项目文件和目录。
在这之前我们先安装两个包:vue、vue-router, npm i -S vue vue-router
。
我们将项目代码相关文件都放在名为app
的文件夹下。我先都创建完,然后一个个介绍。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
node_modules的话就忽略了。
文件/文件夹 | 用途 |
---|---|
app.vue | 作为vue的主文件 |
common | 里面放公共的代码 |
index.html | 页面模板文件 |
index.js | 项目主入口文件 |
router | 放vue对应的router文件 |
views | 放视图文件 |
.gitignore | 忽略node_module |
咱们暂且不关系这些文件里的具体代码是什么,等webpack配置完再说。
二、配置webpack.config.js
安装一系列的包:
为了webpack的运行,需要安装
1 2 |
|
为了处理vue单页文件,安装:
1 |
|
为了处理scss文件并从js中抽离,安装:
1 2 3 4 5 6 7 8 9 |
|
为了处理图片和字体文件,安装:
1 2 |
|
为了支持高级语法-babel,安装:
1 2 3 4 5 6 |
|
为了验证代码格式-eslint,安装:
1 2 3 4 |
|
配置webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
|
总结
这一篇主要就做了三件事:
创建简单的项目结构
安装了这篇,以及之后要用到npm包
配置开发环境的Webpack
相关推荐:
以上是Vue前端架构学习(一)的详细内容。更多信息请关注PHP中文网其他相关文章!

热门文章

热门文章

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)