vue + typespript + webpack

vue + typespript + webpack

介绍

本项目主要是基于 vue + typespript + webpack 搭建。

起步

1. 安装

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

2. 创建项目

安装的时候要自定义配置,选择typescript相关

3. 集成开发环境

强烈建议使用 VSCode,不要问为什么,用就对了!

依赖

以下是主要依赖,完整依赖请查看[package.json]:

  • vue 2.6+
  • typescript 3.5+
  • vue-cli 3.x
  • vue-router 3.x
  • vuex 3.x
  • vue-class-component
  • vue-property-decorator
  • vuex-class
  • webpack 4.x
  • lodash 4.x
  • eslint
  • less

依赖介绍

1. core-js

JavaScript的模块化标准库。包括ECMAScript到2019年的polyfills:promises, symbols, collections, iterators, typed arrays许多其他功能、ECMAScript proposals、一些跨平台的WHATWG / W3C功能和建议,比如URL。您可以只加载所需的特性,或者使用它而不污染全局名称空间。

2. vue-class-component

vue-class-component 是vue作者尤大推出的一个支持使用class方式来开发vue单文件组件的库.

示例:

import Vue from 'vue'
import Component from 'vue-class-component'

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'

  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}

3. vue-property-decorator

vue-property-decorator 依赖于vue-class-component并且扩展了其他功能,如下:

  • @Prop
  • @PropSync
  • @Model
  • @Watch
  • @Provide
  • @Inject
  • @ProvideReactive
  • @InjectReactive
  • @Emit
  • @Ref
  • @Component (provided by vue-class-component)
  • Mixins (the helper function named mixins provided by vue-class-component)

4. vuex-class

vuex-class Binding helpers for Vuex and vue-class-component.

5. lodash + webpack

一个优秀的工具库。

  • 安装
npm install lodash @types/lodash
# or
yarn add lodash @types/lodash
  • 结合 webpack 优化
  1. 安装插件 babel-plugin-lodash:
npm install --save-dev babel-plugin-lodash  @babel/preset-env
# or
yarn add babel-plugin-lodash  @babel/preset-env -D
  1. .babelrc or babel.config.js 配置
{
  "plugins": ["lodash"],
  "presets": [["@babel/preset-env"]]
}

原文地址:https://www.cnblogs.com/allenxt/p/12241946.html

时间: 2024-11-09 09:47:28

vue + typespript + webpack的相关文章

vue.js webpack搭建开发环境

国内推荐用 cnpm 下载 npm 太慢了 1, 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 下载完之后 输入 cnpm -v 查看版本 2 安装vue脚手架 cnpm install -g vue-cli 3.初始化一个项目 vue init webpack my-project 填写项目名字 描述 作者 no no no .... 然后就会出现这些文件 4.下载依赖 成功后出现 node_这个文件

Vue.js——webpack

Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能.官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-sim

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

如何通过 Vue+Webpack 来做通用的前端组件化架构设计 转载 作者:伯乐在线专栏作者 - 新空气 链接:http://web.jobbole.com/86977/ 点击 → 了解如何加入专栏作者 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberjs.avalonjs.vuejs. 我个人接触使用过:avalonjs.angularjs.vuejs.因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构. 以下仅仅是

vue+node+webpack搭建环境

一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack 命令行语句为npm install webpack -g  .测试安装成功的界面如下: 1.3.下面就是安装淘宝镜

运行vue init webpack vueTest时报错

前言:好久没动vue项目了,早上心血来潮.准备写一个项目,然后坚持在github更新,不为别的,只为养成一个习惯. 运行vue init webpack vueTest时,报了下面的错误: 当时我思考了一下,发现没头绪.第一反应把"Error when evaluating filter condition"翻译,结果是"评估过滤条件时出错".完全和程序不沾边啊. 于是我就截图发讨论群去请教大神.发现没人鸟我.尴尬... 无奈之下,我仔细的把报错信息看了一遍, 发现

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil

vue 在webpack 环境下的初始化配置

1,安装node ,可以通过node-v查看自己的node版本 2,安装vue: 通过命令行npm install vue-cli -g 进行全局安装 3,在想要创建vue项目的目录下打开命令行,输入vue init webpack进行webpack环境的初始化配置 配置过程中 如果不知道是什么意思就全部点回车就好,这里特别提一下,如果不选择npm后期会有一定的麻烦 接下来就是等待一系列的安装,这个过程稍微有点长,下载的文件总量差不多有200多M,还是需要等一会的 当现实这一步的时候就代表已经搭

nodejs+webpack+vue之webpack

webpack是一款模块加载器兼打包工具,把JS.样式,图片都作为模块来使用和处理.项目下有个配置文件webpack.config.js,用来告诉webpack需要做什么,本项目的webpack.config.js文件内容如下: 引入模块: var path = require('path') var webpack = require('webpack') 入口文件及输出文件配置: 通过entry节点可以配置入口文件,且支持多个入口文件,每个模板只会有一个入口文件. 通过oupput节点可以配

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通