使用vue-cli3+typescript的项目模板创建工程的教程
版本问题
全局安装过旧版本的vue-cli(1.x或2.x)要先卸载它(vue-V查看自己的脚手架版本)
npmuninstallvue-cli-g//或者yarnglobalremovevue-cli
注:VueCLI3需要nodeJs≥8.9
安装
cnpminstall-g@vue/cli
创建项目(以下只说明用vueui图形化界面导入配置好的demo)
vueui打开脚手架的图形化界面,进到到demo目录,导入(提示没有依赖,选择仍然导入即可)
安装依赖
运行项目
也可以在对应的文件夹下的cmd输入npmrunserve
项目部分说明
文件目录说明
rem适配问题,关系:1rem=100px,屏幕<1000px,不再缩小处理
vscodets的配置(文件->首选项->设置)
{
"window.zoomLevel":0,
"workbench.colorTheme":"OneMonokai",
"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创建工程内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。