使用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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
javascript实现移动端红包雨页面
Jun 23 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP中ADODB类详解
2008/03/25 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
python:socket传输大文件示例
2017/01/18 Python
python 系统调用的实例详解
2017/07/11 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
九年级政治教学反思
2014/02/06 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电