目录
步骤
开发
一、初始化项目
二、配置webpack.config.js
总结
首页 web前端 js教程 Vue前端架构学习(一)

Vue前端架构学习(一)

Feb 02, 2018 pm 01:53 PM
前端 学习 架构

本文我们主要和大家分享Vue前端架构学习(一),这是一篇从零开始做Vue前端架构的分享,希望能帮助到大家。

想想也已经做过不少架构的项目了,有基于vue,基于react,基于thinkPHP,基于laravel的。做多了,也就对现有的架构有各种想法,有好的,有坏的,总之,用起来还是不爽。vue-cli虽然可以很快地构建并使用,尤其是vue-cli v3.0,把webpack都封进@vue/cli的sdk里了,用起来更加干净、简洁。

好了,介绍完毕,接下来,我就从零开始,一步一步建起前后端完全分离的前端架构了。

步骤

由于要介绍的很多,全写在一篇里,有些太长了。

所以,我会分为:

  1. 创建开发环境下的webpack配置文件

  2. 配置eslint、babel、postcss

  3. 创建项目文件、目录架构

  4. 通过koa实现本地数据接口模拟

  5. 创建发布环境下的webpack配置文件

  6. 创建测试环境下的webpack配置文件、以及测试用例 (TODO)

  7. 自动初始化构建项目(TODO)

这七篇来分别介绍。

开发

一、初始化项目

  1. 创建项目文件夹

我们就叫vue-construct

  1. 初始化git

git init

  1. 初始化npm

npm init

  1. 创建项目文件

为了能让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

├── app

│   ├── app.vue

│   ├── common

│   │   ├── img

│   │   ├── js

│   │   └── scss

│   ├── index.html

│   ├── index.js

│   ├── router

│   │   └── index.js

│   └── views

│       └── home

│           └── index.vue

├── .gitignore

├── package-lock.json

├── package.json

└── webpack.config.js

登录后复制

node_modules的话就忽略了。

文件/文件夹 用途
app.vue 作为vue的主文件
common 里面放公共的代码
index.html 页面模板文件
index.js 项目主入口文件
router 放vue对应的router文件
views 放视图文件
.gitignore 忽略node_module

咱们暂且不关系这些文件里的具体代码是什么,等webpack配置完再说。

二、配置webpack.config.js

  1. 安装一系列的包:

为了webpack的运行,需要安装

1

2

webpack

webpack-dev-server

登录后复制

为了处理vue单页文件,安装:

1

vue-loader

登录后复制

为了处理scss文件并从js中抽离,安装:

1

2

3

4

5

6

7

8

9

node-sass

style-loader

css-loader

sass-loader

vue-style-loader

postcss

postcss-loader

autoprefixer

extract-text-webpack-plugin

登录后复制

为了处理图片和字体文件,安装:

1

2

file-loader

url-loader

登录后复制

为了支持高级语法-babel,安装:

1

2

3

4

5

6

babel

babel-loader

babel-plugin-syntax-dynamic-import

babel-plugin-transform-object-rest-spread

babel-polyfill

babel-preset-env

登录后复制

为了验证代码格式-eslint,安装:

1

2

3

4

eslint

eslint-loader

eslint-plugin-html

babel-eslint

登录后复制
  1. 配置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

const webpack = require('webpack')

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// 为了抽离出两份CSS,创建两份ExtractTextPlugin

// base作为基础的css,基本不变,所以,可以抽离出来充分利用浏览器缓存

// app作为迭代的css,会经常改变

const isProduction = process.env.NODE_ENV === 'production'

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractBaseCSS =

  new ExtractTextPlugin(

    {

      filename:'static/css/base.[chunkhash:8].css',

      allChunks: true,

      disable: !isProduction // 开发环境下不抽离css

    }

  )

const extractAppCSS

  new ExtractTextPlugin(

    {

      filename:'static/css/app.[chunkhash:8].css',

      allChunks: true,

      disable: !isProduction // 开发环境下不抽离css

    }

  )

 

// 减少路径书写

function resolve(dir) {

  return path.join(__dirname, dir)

}

 

// 网站图标配置

const favicon = resolve('favicon.ico')

 

// __dirname: 总是返回被执行的 js 所在文件夹的绝对路径

// __filename: 总是返回被执行的 js 的绝对路径

// process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

const config = {

  // sourcemap 模式

  devtool: 'cheap-module-eval-source-map',

  // 入口

  entry: {

    app: [

      'babel-polyfill'// 这里是配合babel-present-env导入的动态babel-polyfill,因此npm需dev依赖

      resolve('app/index.js')

    ]

  },

  // 输出

  output: {

    path: resolve('dev'),

    filename: 'index.bundle.js'

  },

  resolve: {

    // 扩展名,比如import 'app.vue',扩展后只需要写成import 'app'就可以了

    extensions: ['.js''.vue''.scss''.css'],

    // 取路径别名,方便在业务代码中import

    alias: {

      api: resolve('app/api/'),

      common: resolve('app/common/'),

      views: resolve('app/views/'),

      components: resolve('app/components/'),

      componentsBase: resolve('app/componentsBase/'),

      directives: resolve('app/directives/'),

      filters: resolve('app/filters/'),

      mixins: resolve('app/mixins/')

    }

  },

  // loaders处理

  module: {

    rules: [

      {

        test: /\.js$/,

        include: [resolve('app')],

        loader: [

          'babel-loader',

          'eslint-loader'

        ]

      },

      {

        test: /\.vue$/,

        exclude: /node_modules/,

        loader: 'vue-loader',

        options: {

          extractCSS: true,

          loaders: {

            scss: extractAppCSS.extract({

              fallback: 'vue-style-loader',

              use: [

                {

                  loader: 'css-loader',

                  options: {

                    sourceMap: true

                  }

                },

                {

                  loader: 'postcss-loader',

                  options: {

                    sourceMap: true

                  }

                },

                {

                  loader: 'sass-loader',

                  options: {

                    sourceMap: true

                  }

                }

              ]

            })

          }

        }

      },

      {

        test: /\.(css|scss)$/,

        use: extractBaseCSS.extract({

          fallback: 'style-loader',

          use: [

            {

              loader: 'css-loader',

              options: {

                sourceMap: true

              }

            },

            {

              loader: 'postcss-loader',

              options: {

                sourceMap: true

              }

            },

            {

              loader: 'sass-loader',

              options: {

                sourceMap: true

              }

            }

          ]

        })

      },

      {

        test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 8192,

          name: isProduction

            'static/img/[name].[hash:8].[ext]'

            'static/img/[name].[ext]'

        }

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 8192,

          name: isProduction

            'static/font/[name].[hash:8].[ext]'

            'static/font/[name].[ext]'

        }

      }

    ]

  },

  plugins: [

    // html 模板插件

    new HtmlWebpackPlugin({

      favicon,

      filename: 'index.html',

      template: resolve('app/index.html')

    }),

    // 抽离出css

    extractBaseCSS,

    extractAppCSS,

    // 热替换插件

    new webpack.HotModuleReplacementPlugin(),

    // 更友好地输出错误信息

    new FriendlyErrorsPlugin()

  ],

  devServer: {

    proxy: {

      // 凡是 `/api` 开头的 http 请求,都会被代理到 localhost:7777 上,由 koa 提供 mock 数据。

      // koa 代码在 ./mock 目录中,启动命令为 npm run mock。

      '/api': {

        target: 'http://localhost:7777', // 如果说联调了,将地址换成后端环境的地址就哦了

        secure: false

      }

    },

    host: '0.0.0.0',

    port: '9999',

    disableHostCheck: true, // 为了手机可以访问

    contentBase: resolve('dev'), // 本地服务器所加载的页面所在的目录

    // historyApiFallback: true, // 为了SPA应用服务

    inline: true, //实时刷新

    hot: true  // 使用热加载插件 HotModuleReplacementPlugin

  }

}

 

module.exports = {

  config: config,

  extractBaseCSS: extractBaseCSS,

  extractAppCSS: extractAppCSS

}

登录后复制

总结

这一篇主要就做了三件事:

  1. 创建简单的项目结构

  2. 安装了这篇,以及之后要用到npm包

  3. 配置开发环境的Webpack

相关推荐:

VUE前端cookie简单操作实例分享

以上是Vue前端架构学习(一)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Spring Data JPA 的架构和工作原理是什么? Spring Data JPA 的架构和工作原理是什么? Apr 17, 2024 pm 02:48 PM

Spring Data JPA 的架构和工作原理是什么?

1.3ms耗时!清华最新开源移动端神经网络架构 RepViT 1.3ms耗时!清华最新开源移动端神经网络架构 RepViT Mar 11, 2024 pm 12:07 PM

1.3ms耗时!清华最新开源移动端神经网络架构 RepViT

PHP与Vue:完美搭档的前端开发利器 PHP与Vue:完美搭档的前端开发利器 Mar 16, 2024 pm 12:09 PM

PHP与Vue:完美搭档的前端开发利器

前端面试官常问的问题 前端面试官常问的问题 Mar 19, 2024 pm 02:24 PM

前端面试官常问的问题

一起学习word根号输入办法 一起学习word根号输入办法 Mar 19, 2024 pm 08:52 PM

一起学习word根号输入办法

golang框架架构的学习曲线有多陡峭? golang框架架构的学习曲线有多陡峭? Jun 05, 2024 pm 06:59 PM

golang框架架构的学习曲线有多陡峭?

手撕Llama3第1层: 从零开始实现llama3 手撕Llama3第1层: 从零开始实现llama3 Jun 01, 2024 pm 05:45 PM

手撕Llama3第1层: 从零开始实现llama3

综述!全面概括基础模型对于推动自动驾驶的重要作用 综述!全面概括基础模型对于推动自动驾驶的重要作用 Jun 11, 2024 pm 05:29 PM

综述!全面概括基础模型对于推动自动驾驶的重要作用

See all articles