使用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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
vue.js语法及常用指令
Oct 29 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
原生js实现随机点餐效果
Dec 10 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文件上传的两种实现方法
2016/04/04 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python中import reload __import__的区别详解
2017/10/16 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python 3 判断2个字典相同
2019/08/06 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
Python 里最强的地图绘制神器
2021/03/01 Python
单位门卫岗位职责
2013/12/20 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
试用期自我评价范文
2015/03/10 职场文书
用Python实现Newton插值法
2021/04/17 Python
Django如何与Ajax交互
2021/04/29 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技