使用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 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
基于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
PHP面向对象编程快速入门
2006/12/14 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
用python制作游戏外挂
2018/01/04 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
酒店服务与管理毕业生求职信
2013/11/02 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
租车协议书范本2014
2014/11/17 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL