使用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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
Display SQL Server Login Mode
Jun 21 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Vue实现验证码功能
Dec 03 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 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
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
学习python (2)
2006/10/31 Python
python字符串对其居中显示的方法
2015/07/11 Python
python中defaultdict的用法详解
2017/06/07 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python3中列表list合并的四种方法
2019/04/19 Python
如何基于python操作json文件获取内容
2019/12/24 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
奥巴马开学演讲稿
2014/05/15 职场文书
2014年司机工作总结
2014/11/21 职场文书
爱心助学感谢信
2015/01/21 职场文书
死亡诗社观后感
2015/06/05 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技