使用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 相关文章推荐
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
使用console进行性能测试
2015/04/27 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
编程语言Python的发展史
2014/09/26 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
建筑工程专业大学生求职信
2014/04/23 职场文书
节约用水标语
2014/06/11 职场文书
节约粮食标语
2014/06/18 职场文书
党员评议思想汇报
2014/10/08 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android