仿有赞后台+vue+ts+vuecli3.0+elementUi
栏目: JavaScript · 发布时间: 6年前
内容简介:最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好,但是对于ts和js之间个人还是选择ts的。语法糖来说es6简直舒爽,下面我详细介绍下怎么使用ts+vue。ts+vue的插件会少上很多,但是肯定会随着vue对ts的支持插件也会越来越多(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 QQ764506248备注(github进来的)游泳健身了解一下:VueCLI 3.0 首先安装node.js自己百度安装
最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好,但是对于ts和js之间个人还是选择ts的。语法糖来说es6简直舒爽,下面我详细介绍下怎么使用ts+vue。ts+vue的插件会少上很多,但是肯定会随着vue对ts的支持插件也会越来越多(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 QQ764506248备注(github进来的)
游泳健身了解一下: github
内容总结
- vue cli3的安装。
- vue config文件配置
- 项目结构文件搭建
- 路由的使用
- vue cli启动以及启用下载ts 支持vue 的插件
- ts aixo的使用
- vue X的使用
- 图片上传(批量上传)//ts element的使用
- 分页的使用
- 重制按钮的分装
- 富文本编译器
- 表单验证
1.VueCLI 3.0
VueCLI 3.0 首先安装node.js自己百度安装
安装:
# 然后我们安装vuecli3.0 npm 或者 yarn都是可以的网上慢的小伙子可以用yarn npm install -g @vue/cli # OR yarn global add @vue/cli 复制代码
创建一个项目:
vue create my-project # OR vue ui 复制代码
- 第一个是自己创建过的模版。
- 第二个是系统默认的
- 第三个自己选配置
我这边有创建过一个,我们选红色选中的这个
我们这样选择。 空格键是否选中,上下选择
直接回车(默认同意)
一路回车然后选择package.json 看下我们选择了啥ts 然后sass 语法检查esl
然后再回车就进行最后的cli项目的下载了。耐心等待
我们下载好了
# 输入 vue ui 复制代码
欢迎来到vuecli3.0 图形话界面,现别着急现看我们的项目文件结构
2.vue config文件配置
下面是我们的文件的结构
## 文件介绍 1. node_modules //当前node模块存放处 2. public //index页面所在镜头文件也可以放这个里面 3. src //当前项目存放 assets //静态文件存放 components //组件存放 views //项目存放 app.vue //这个我们文件的主要路由输入地方 main //总的js文件 router //路由文件 shims-tsx.d //兼容jsx shims-vue.d //兼容vue store //vuex总文件 4. pakeage.js //文件(我们安装的依赖都再里面可以看到,也可以根据这个去下载node_modules) 5. 我们还少一个vue.config.js 和 pakeage.js 同级 复制代码
为我等伸手党送上一份福利
// vue.config.js module.exports = { // 选项... // 当使用基于 HTML5 history.pushState 的路由时; // 当使用 pages 选项构建多页面应用时。 baseUrl:"", // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。 outputDir:"webApp", // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 assetsDir:"assets", // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath:"index.html", // 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。 filenameHashing:true, // 多页面 pages:undefined, // 编译警告 lintOnSave:false, // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。 runtimeCompiler:false, // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。 transpileDependencies:[], // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 productionSourceMap:false, // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。 crossorigin:undefined, // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外,当启用 SRI 时,preload resource hints 会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。 integrity:false, // 反向代理 devServer:{ // devServer: { // proxy: { // '/api': { // target: '1', // ws: true, // changeOrigin: true // } // } // } } } 复制代码
vue+ts基本的项目搭建就完成了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 飞特后台管理系统 3.0:不仅仅是后台,还有商城模块
- Linux 后台运行任务 nohup 结合 & 用法以及如何精准查找进程并 kill 后台任务实践
- TIMO 后台管理系统 v2.0 发布,带来全新的项目结构,支持前后台模块分离部署!
- 电商后台设计:系统消息
- APP后台架构设计
- 网站重构-后台服务篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
jQuery基础教程 (第4版)
[美] Jonathan Chaffer、[美] Karl Swedberg / 李松峰 / 人民邮电出版社 / 2013-10 / 59.00
本书由jQuery API网站维护者亲自撰写,第一版自2008上市以来,一版再版,累计重印14次,是国内首屈一指的jQuery经典著作! 作为最新升级版,本书涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuery的核心组件,包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery M......一起来看看 《jQuery基础教程 (第4版)》 这本书的介绍吧!