Vue全家桶实践(一)---vue-cli

最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算前端梳理一下思路。

相关博客:

  1. Vue全家桶实践(一)—vue-cli
  2. Vue全家桶实践(二)—iView
  3. Vue全家桶实践(三)—axios
  4. Vue全家桶实践(四)—vue-router
  5. Vue全家桶实践(五)—渲染函数&JSX
  6. Vue全家桶实践(六)—自定义指令(directive)

Vue-cli

参考资料:

  1. vue-cli文档

要开发Vue的SPA,就离不开Vue-cli这个友好的脚手架,它帮我们封装了webpack的复杂的配置,替我们省了很多事。
但实际上我们在开发的过程中,不可避免的需要修改这些配置,要想顺利高效的开发,对它的了解是必不可少的。接下来简单的梳理下vue-cli

快速开始:

// 全局安装脚手架
$ npm install -g vue-cli
// 初始化vue项目
$ vue init webpack my-project
// 进入项目目录
$ cd my-project
// 安装依赖
$ npm install
// 启动开发服务器
$ npm run dev

项目结构:

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 主项目配置文件
│   └── ...
├── src/                          # 源代码
│   ├── main.js                 # app入口文件
│   ├── App.vue                 # 主app组件
│   ├── components/             # 通用组件
│   │   └── ...
│   └── assets/                 # 模块资源 (会被webpack处理)
│       └── ...
├── static/                     # 纯静态资源 (直接复制的静态资源)
├── test/                         # 测试相关
│       └── ...                
├── .babelrc                    # babel 配置,ES6/7语法转换
├── .editorconfig               # 文件换行,空格,tab和类似的设置,方便编辑器读取
├── .eslintrc.js                # eslint 配置,严格的代码规范。
├── .eslintignore               # eslint ignore 配置规则,哪些文件不需要通过eslint校验
├── .gitignore                  # git提交时忽略哪些文件
├── .postcssrc.js               # postcss 配置,他也是一种css预处理器
├── index.html                  # index.html 入口html
├── package.json                # 项目信息以及依赖
└── README.md                   # Default README file

执行脚本:

// 启动一个node.js本地开发服务器,开发时使用。
npm run dev
  • 通过webpack和vue-loader编译处理vue单文件组件
  • 保存状态和热重载
  • 保存状态并在上边覆盖显示报错
  • 执行eslint
  • 创建source map方便调试
// 把源码打包,给开发环境使用。放在打包之后多出的dist文件夹中。
npm run build
  • 压缩js
  • 压缩html
  • 提取出所有组件的css合并成一个文件并压缩。
  • 给所有的静态资源加上一个版本号的hash防止用户浏览器缓存过期文件。并在index.html中引入上述文件。
// 执行单元测试。
npm run unit
// 执行e2e测试。
npm run e2e
// 执行eslint检查代码错误,并显示。
npm run lint

Babel 配置

一般不需要修改。

Linter 配置

一般不需要修改。

预处理器

vue-cli已经支持了热门的css预处理器如sass,less,stylus和postCSS等。在组件中使用的时候,只要在<style>标签上加上属性即可:

// 其中sass 和 scss两种写法(花括号和缩进)都支持
<style lang="scss">
/* write SASS! */
</style>

全局css文件:
通用的全局css,可以写在单独的文件中,方便维护。使用时在App.vue组件中引入即可。
但我是自己测试,在main.js中引入也可以。不过官方推荐的是在App中,所以我也改在App组件中引入了。

<!-- App.vue中引入 -->
<style src="./styles/global.less" lang="less"></style>

<!-- main.js中引入 -->
import 'assets/scss/common.scss'

处理静态资源

从上边的目录接口中能看到,我们构造的vue项目中有两个静态资源目录,分别是src/assetsstatic/。为啥捏?

简单来说,放在src/assets中的静态文件,webpack在编译的时候会把各种静态资源解析为依赖模块,webpack会给他加上各种识别码,把他们变成js源代码的一部分,比如图片转为base64。而放在static/中的,webpack只是直接复制粘贴过去而已,所以这些文件在引用时,必须要使用绝对路径。

环境变量

有事我们需要根据运行环境的不同,对代码做不同的控制。比如在本地开发时要通过本地node服务器转发请求,想给所有的接口url增加一个’/api’前缀,然后proxyTable就可以设置,将所有以’/api’开头的请求转发到开发服务器。而当我们发布的时候,生产环境是不需要这个’/api’前缀的,总不能一个一个去删除。这时候就可以用环境变量来做判断。config文件夹下的dev.env.js和prod.env.js就分别对应开发环境和生产环境的配置。

配置可以很方便的在代码中按下边的方式读取,并且解决我们刚才遇到的问题:

// main.js

Vue.config.productionTip = process.env.NODE_ENV === 'production'

// 在axios拦截器中判断当前环境,来决定是否增加前缀
// 使用axios来发ajax
// 增加一个拦截器,当method为form时,使用表单提交的方式
// 使用qs包将data转为表单数据
axios.interceptors.request.use((config) => {
  // 若在本地开发环境,则给url增加 '/api' 后缀
  if (!Vue.config.productionTip) {
    config.url = '/api' + config.url
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
Vue.prototype.$http = axios

这里暂时不懂没关系,关于axios的部分会在之后的博客中详解。

与后端框架集成

如果是开发前后端分离的项目,那么基本上不用怎么修改config/index.js这个文件。但是如果我们要跟后端框架(如Rails/Django/Laravel)等结合使用,在这里配置就可以直接生成后端需要的东西。

实际上,即使是前后端分离的项目,这个config/index.js文件也是我们最常接触的配置文件。我们简单看看:

// config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  // npm run build 打包编译文件,放到dist文件夹
  build: {
    // 引入环境配置文件
    env: require('./prod.env'),
    // 入口文件是打包后的dist文件夹中的index.html文件,必须是绝对路径
    index: path.resolve(__dirname, '../dist/index.html'),
    // 指向包含打包后所有静态资源的目录地址。必须是绝对路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 这里是所有的静态资产,其中static的是被直接复制过来的,而assets先处理再拿过来
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    // 生产环境是否要source map
    productionSourceMap: true,
    // 默认关闭压缩,因为已经帮你压缩过了。
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },
  // npm run dev 开发服务器
  dev: {
    // 引入开发环境的配置文件
    env: require('./dev.env'),
    // 设置监听端口
    port: 8080,
    // 自动打开默认浏览器
    autoOpenBrowser: true,
    // 静态资源在 static文件夹下
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 开发过程中代理请求。开发时我们会在本地启用一个nodejs服务器,然后代理你的所有
    // 请求,把请求转发至远程开发服务器,解决跨域问题。
    // 下边是一个简单的设置
    proxyTable: {
      // 所有以 '/api' 为开头的请求
      "/api": {
        // 目标地址
        target: "http://xx.xx.xx.xx:9091",
        changeOrigin: true,
        // 重写请求
        pathRewrite: {
          // 将 '/api' 前缀去掉
          "^/api": ""
        }
      }
    },
    cssSourceMap: false
  }
}

了解了以上这些,就能够解决大多数开发中的问题了。看起来很复杂的东西,一行行读下去,其实也很简单。

已标记关键词 清除标记
【为什么前端都要学习Vue】 这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲,作者是我国的尤雨溪大神。相对于其他前端框架,Vue 更容易上手!正因为它简单易学,很多前端开发工程师可以很快掌握并且应用到实际开发中。如果说你想用最短的时间来学习一个框架,快速上手项目,Vue是不二之选。 【学员收益】 1)大部分学员想要学习Vue,但是无奈缺少一个好老师,董老师将手把手带领你学习,让你彻底掌握Vue框架。 2)课程将会长期维护,内容更超值,本课程基于最新的版本进行讲解,并且老师会更新升级到3.0稳定版本。 3)学完该课程后不仅能学到Vue的设计和开发技能,还能培养市场思维、用户思维、设计思维,并能够利用掌握的技术开发Vue项目,获取额外的收益。 【课程收获】 1、从基础知识到项目实战,内容涵盖Vue各个层面的知识和技巧 2、学习曲线平缓,前端新人也可以看得懂 3、贴近企业项目,按照企业级代码标准和工程开发的流程进行讲解 4、让你能够独立开发高颜值的项目 5、项目涉及14大功能组件,从基础组件到业务组件,一站式全掌握 【项目效果】 本课程打造的是高颜值的美团外卖项目。不仅界面美观,而且涉及到了众多页面。多说无益,请大家扫码查看课程效果。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页