使用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之chat.js文件
Apr 08 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
JS array 数组详解
Mar 22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
angular 服务随记小结
May 06 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
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
javascript常用的设计模式
2017/02/09 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
JS代码实现电脑配置检测功能
2018/03/21 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
python实现猜拳游戏项目
2020/11/30 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python中doctest库实例用法
2020/12/31 Python
服务生自我鉴定
2014/01/22 职场文书
文秘人员工作职责
2014/01/31 职场文书
信息技术教学反思
2014/02/12 职场文书
合作协议书怎么写
2014/04/18 职场文书
老公给老婆的保证书
2014/04/28 职场文书
医德医风自我评价
2014/09/19 职场文书
同意报考证明
2015/06/17 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android