使用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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
VUE实现日历组件功能
Mar 13 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 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
escape unescape的php下的实现方法
2007/04/27 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
图片之间的切换
2006/06/26 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python实现Youku视频批量下载功能
2017/03/14 Python
Python IDLE入门简介
2017/12/08 Python
python实现爬取图书封面
2018/07/05 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python 堆和优先队列的使用详解
2019/03/05 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
老总助理工作岗位职责
2014/02/06 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
高中生军训感言
2015/08/01 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
队名及霸气口号大全
2015/12/25 职场文书
z-index不起作用
2021/03/31 HTML / CSS
「月刊Action」2022年5月号封面公开
2022/03/21 日漫