专栏首页艺述思维vue 开发常用工具及配置一

vue 开发常用工具及配置一

目录

  • 1,NodeJS
  • 2,Vue CLI
  • 3,Vue UI
  • 4,后台接口反向代理
  • 5,vue-devtools

1,NodeJS

访问 nodejs.org 下载。这是必不可缺的环境之一。下载最新的 LTS 版本。LTS 代表长期维护,通常比较稳定。

2,Vue CLI

vue-cli 是从头搭建 vue 工程的脚手架工具,通过该工具,可以简化工程环境的配置。vue-cli 的官网地址为:cli.vuejs.org/zh/。

使用命令安装:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装后检查版本:

vue -V

最新版本在 3 以上:3.3.0

安装 VUE CLI 之后,就可以使用create指令创建项目了:

vue create hello-world

除了命令行创建,还可以使用 VUE UI 创建。

如上所示,在创建过程中,涉及到这些工程特性:

  • Babel,必选,用于将编写的ES6代码编译成浏览器能识别的JavaScript代码,是核心组件包
  • Typescript,微软开发的JS的强类型版本,通过Babel能够编译成JavaScript,可选
  • PWA,Progressive web apps,渐进式Web 应用,一般不选
  • Router,路由组件,用于页面跳转,多页面程序必选,单页面不选
  • Vuex,存储框架,看复杂度,建议选用
  • CSS Pre-processors,CSS预处理工具,支持SASS,LESS 等预编译语言,最终将这些内容处理成 css,必选。element-ui和bootstrap等框架都选择了 sass,可以选择sass,也可以选择 less。
  • Linter / Formatter,代码规范检查工具,可选
  • Unit Testing,单元测试框架 可选
  • E2E Testing,端对端测试框架,用于支持自动化测试,可选

项目创建完成后,了解一下项目目录结构:

  • node_modules,本地依赖包的存放所在,所有npm install --save-dev所安装的包,都在该目录下
  • public,该目录存储了所有静态文件,如html文件模板,公共css文件,小图片等
  • src,源码所在
  • babel.config.js,babel的配置文件
  • package.json,顶重要的webpack工程化配置文件

运行测试:

npm run serve

运行效果:

3,Vue UI

这是一个在浏览器里代替使用命令行管理 vue 项目的工具,内嵌于 VUE CLI 3 内提供。功能主要有:创建项目、配置项目预装选项、安装与移除插件、配置项目、执行项目任务(serve、build等)。

这个工具可以用,可以不用,适合初学者。详细介绍见:

https://zhuanlan.zhihu.com/p/39390139

4,后台接口反向代理

在vue开发中,前端界面和后台服务分离,为了便于调试,通常在本地环境中设置反向代理,连接到后台接口服务。在工程根目录下新建vue.config.js文件,内容如下:

module.exports = {
  devServer: {
    port: 8090,
    proxy: {
      "/api": {
        secure: false,
        target: 'http://127.0.0.1:8010',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/" 
        },
        cookiePathRewrite:{
          '/':'/',
          '/nfcm':'/api'
        },
        router: {
          'dev.localhost:3000': 'http://localhost:8000'
        }
      }
    }
  }
};

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串。它会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://127.0.0.1:8010。

pathRewrite 在这里理解成:用‘/api’代替target里面的地址。例如在调用接口时,接口地址是'http://127.0.0.1:8010/user/add',直接写 ‘/api/user/add’ 即可。

关于 router 的配置,当请求的 head的 host 为dev.localhost:3000时,转到http://localhost:8000'。

5,vue-devtools

这是专门针对 vue 组件开发的 chrome 开发者工具插件。可以查看整个页面的 vue 组件树和每个组件的 data,并且可以动态的更改 data,然后会更新 UI 到应用上。

通过应用商店安装:chrome - vuejs-devtools

《基于 vue+go 如何快速进行业务迭代?》

参考链接

https://zhuanlan.zhihu.com/p/39390139

Vue UI:Vue开发者必不可少的工具

https://cn.vuejs.org/v2/guide/#起步

Vue.js 起步

https://cli.vuejs.org/zh/config/#devserver-proxy

devServer.proxy

https://juejin.im/entry/5cda40bff265da036d79dd2c

vue.js开发环境搭建

https://segmentfault.com/a/1190000017480921

vue 前端项目技术选型、开发工具、周边生态

本文分享自微信公众号 - 用故事讲技术(ygsjjs),作者:石桥码农

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 12 手写配置启动一个 vue2 项目

    2019年10月5日,vue 团队发布了 Vue3.0 预览版源码,预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

    李艺
  • Vue 全家桶、原理及优化简议

    使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Mod...

    李艺
  • 石桥码农:Vue3 与 Vue2 在响应机制的实现上有什么差别?

    vue 开发者可能都遇到过这样一个问题:如果模板中数据绑定的是一个数组,我们在 js 代码里面,直接以索引方式改变数组元素的值,有时候视图并不会按照我们的期许更...

    李艺
  • flag - 4-5月份预整理总结的文章目录

    xing.org1^
  • 收集

    http://blog.csdn.net/fungleo/article/details/77584701

    onety码生
  • VUE-vue-cli

    在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。

    cwl_java
  • Vuejs学习笔记-vue-cli

    这篇使用vue构建工具vue-cli创建vue项目的本应该是在基础篇发完之后的,无奈基础篇有点久了,先把今天学的记录下。

    汐楓
  • vue[0x01] -- Hello World

    如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早...

    丰臣正一
  • vue 项目局域网访问项目

    “serve”: “vue-cli-service serve “,  // 原本是这样的

    kirin
  • vue入门环境搭建及运行

    Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具...

    会呼吸的Coder

扫码关注云+社区

领取腾讯云代金券