使用vue-cli3+typescript的项目模板创建工程的教程

版本问题

全局安装过旧版本的 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目录,导入(提示没有依赖,选择仍然导入即可)

安装依赖

运行项目

也可以在对应的文件夹下的cmd 输入 npm run serve

项目部分说明

文件目录说明

rem适配问题,关系:1rem=100px,屏幕<1000px,不再缩小处理

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 创建工程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-cli3+typescript初体验小结

    前言 气势汹涌,ts似乎已经在来的路上,随时可能敲门. 2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去.后来换工作,现实把脸都打肿了,没做过vue.react.angular?不要! 今天,不能犯这个错了,毕竟时不我与,都快奔三了. vue-cli3 vue-cli3的详细功能推荐官方文档,不在本文介绍范围内. 安装: npm install -g @vue/cli 检查安装成功与否: vue --version 创建项目: vue cre

  • 基于vue-cli3+typescript的tsx开发模板搭建过程分享

    项目创建 使用 vue-cli3+ 创建一个基于 ts 的模板: vue-tsx-support 上一步中已经创建完了基于 ts 的 vue 模板,但是开发方式还是如同之前的 template 一样,只是将 script 中的 js 部分改成了 ts 来书写.接下来就将 模板(template) 方式改成 tsx 的方式,这里需要借助一个库 -- vue-tsx-support 首先安装 vue-tsx-support : npm install vue-tsx-support --save #

  • 使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

    前言 Vue3.x 即将来袭,使用 TypeScirpt 重构,TypeScript 将成为 vue 社区的标配,出于一名程序员的焦虑,决定现在 Vue2.6.x 踩一波坑. vue 官方文档已经简略地对 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目 创建项目 ❓为什么使用 Vue Cli3 构建项目 官方维护,后续升级减少兼容性问题 使用以下配置进行项目的生成: Babel 对 Ts 进行转译 TSLint 对 TS 代码进行规范,后续会使用 prettie

  • vue-cli3+typescript新建一个项目的思路分析

    最近在用vue搭一个后台管理的单页应用的demo,因为之前只用过vue-cli2+javascript进行开发,而vue-cli3早在去年8月就已经发布,并且对于typescript有了很好地支持.所以为了熟悉新技术,我选择使用vue-cli3+typescript进行新应用的开发.这里是新技术的学习记录. 初始化项目 卸载老版本脚手架,安装新版本脚手架后,开始初始化项目.初始化的命令跟2.x版本的略有不同,以前是 vue init webpack project-name ,而现在是 vue

  • 使用vue-cli3+typescript的项目模板创建工程的教程

    版本问题 全局安装过旧版本的 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中typescript装饰器的使用方法超实用教程

    VueConf ,尤大说, Vue 支持 Ts 了,网上关于 Vue + Ts 的资料有点少, 楼主踩了一个星期坑,终于摸明白了 修饰器 的玩法,下面我们就来玩下 Vue 的 decorator 吧 1,data 值的声明 在这里 public 声明的是公有属性, private 声明的是私有属性,私有属性要带 下划线 蓝色框里的内容是声明组件,在每个组件创建时都要带上, Components 中的写法如下 上面是 普通写法 ,下面是 懒加载写法 2.@Prop 父组件传值给子组件 父组件使用

  • 如何在IDEA上安装scala插件并创建工程(图文教程)

      大家好,我是不温卜火,是一名计算机学院大数据专业大二的学生,昵称来源于成语-不温不火,本意是希望自己性情温和.作为一名互联网行业的小白,博主写博客一方面是为了记录自己的学习过程,另一方面是总结自己所犯的错误希望能够帮助到很多和自己一样处于起步阶段的萌新.但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只有csdn这一个平台,博客主页:https://buwenbuhuo.blog.csdn.net/   关于scala的安装并配置环境变量的问题,小伙伴们感兴趣

  • Vue CLI3搭建的项目中路径相关问题的解决

    这是开头 最近在试水 Vue CLI 3,并且尝试配置一个多页面(多应用)项目出来,期间又遇到各种路径问题,于是...于是有了下面的唠叨. 以下都是基于 Vue CLI 3 来举例说明的,使用 2.x 版本的其实也类似 首先,参考 官方文档对静态资源处理的说明,并通过自己的实践,可以总结出以下内容 静态资源可以通过两种方式进行处理: 1.以下情况下,资源不会被 webpack 处理,而是被直接拷贝: 放置在 public 目录下,即使未被使用. 通过绝对路径被引用,即以 / 开头的路径. 2.以

  • VS2019 自定义项目模板的实现方法

    VS2019 自定义项目模板的实现方法

    前言: 使用"宇宙最强IDE"开发项目时,都需要根据不同情况选择一个项目模板,来满足开发需求:如下 VS为我们提供了基础的项目模板,但现有项目模板未包含基础功能如:日志输出.审计日志.SwaggerUI.认证等,那么我们能否自定义项目模板来满足我们的需求呢?答案当然是肯定的 那么接下来开始实现自定义项目模板的创建 一.自定义项目模板创建 本次我们来创建一个实现了基础功能的webapi模板 创建自定义的项目模板,有以下几个步骤: 1.创建原始的项目(模板项目) 创建WebApi项目: 实

  • Vue Cli3 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • vue@cli3项目模板怎么使用public目录下的静态文件

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事 后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久. 解决问题 网上一大堆牛头不对马嘴的,我也是无语了 最后的最后,终于官网找到了完美的解决方案 如此设置,完美解决问题,如果你留

  • Vue脚手架学习之项目创建方式

    一.什么是脚手架? 1.Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖: 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展. 一个丰富的官方插件集合,集成了前端生态中最好的工

随机推荐