使用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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
vue实现打地鼠小游戏
Aug 21 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
使用无限生命期Session的方法
2006/10/09 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php 无法载入mysql扩展
2010/03/12 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
js表单验证实例讲解
2016/03/31 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
详解python单元测试框架unittest
2018/07/02 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
JAVA软件工程师测试题
2014/07/25 面试题
最新销售员个人自荐信
2013/09/21 职场文书
汽车驾驶求职信
2013/10/25 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
中专毕业生自我鉴定
2013/11/21 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
班组长岗位职责
2014/03/03 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2015元旦节寄语
2014/12/08 职场文书
工程催款通知书
2015/04/17 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
小学远程教育工作总结
2015/08/13 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
德劲DE1108畅想
2021/04/22 无线电
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python