使用vue-cli3+typescript的项目模板创建工程的教程


Posted in Javascript onFebruary 28, 2020

版本问题

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它 (vue -V 查看自己的脚手架版本)

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

注:Vue CLI 3需要 nodeJs ≥ 8.9

安装

cnpm install -g @vue/cli

创建项目(以下只说明用vue ui图形化界面导入配置好的demo)

vue ui 打开脚手架的图形化界面,进到到demo目录,导入(提示没有依赖,选择仍然导入即可)

使用vue-cli3+typescript的项目模板创建工程的教程

安装依赖

使用vue-cli3+typescript的项目模板创建工程的教程

运行项目

使用vue-cli3+typescript的项目模板创建工程的教程

也可以在对应的文件夹下的cmd 输入 npm run serve

项目部分说明

文件目录说明

使用vue-cli3+typescript的项目模板创建工程的教程

rem适配问题,关系:1rem=100px,屏幕<1000px,不再缩小处理

使用vue-cli3+typescript的项目模板创建工程的教程

vscode ts的配置(文件->首选项->设置)

{
 "window.zoomLevel": 0,
 "workbench.colorTheme": "One Monokai",
 "editor.fontSize": 18,
 "search.followSymlinks": false,
 "emmet.includeLanguages": {
 "wxml": "html"
 },
 "vetur.validation.template": false,
 "minapp-vscode.disableAutoConfig": true,
 "prettier.tabWidth": 4,
 "vetur.format.defaultFormatter.html": "prettier",
 "editor.codeActionsOnSave": {
 "source.fixAll.tslint": true
 },
 // 每次保存的时候使用tslint格式化
 "tslint.autoFixOnSave": true,
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // #每次保存的时候自动格式化
 "editor.formatOnSave": true,
 "prettier.tslintIntegration": true,
 // #去掉代码结尾的分号
 "prettier.semi": false,
 // #使用带引号替代双引号
 "prettier.singleQuote": true,
 // #让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
 // #这个按用户自身习惯选择
 // #让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.ts": "vscode-typescript",
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue组件中html代码格式化样式
 }
 },
 // 存在tslint配置文件时才启用
 "tslint.validateWithDefaultConfig": true,
 "javascript.implicitProjectConfig.experimentalDecorators": true,
 "breadcrumbs.enabled": true,
 "[typescript]": {
 "editor.defaultFormatter": "vscode.typescript-language-features"
 },
 "[json]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
}

总结

到此这篇关于使用vue-cli3+typescript的项目模板创建工程的文章就介绍到这了,更多相关vue-cli3+typescript 创建工程内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的取反再取反~~没有意义
Apr 06 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
js读取cookie方法总结
Oct 31 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
vue中轮训器的使用
Jan 27 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 #Javascript
vue 中的 render 函数作用详解
Feb 28 #Javascript
微信小程序动态添加和删除组件的现实
Feb 28 #Javascript
浅析Vue 中的 render 函数
Feb 28 #Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 #Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
You might like
一个分页的论坛
2006/10/09 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
保护环境演讲稿
2014/05/10 职场文书
学习演讲稿范文
2014/05/10 职场文书
经济国贸专业求职信
2014/06/18 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS