精华内容
下载资源
问答
  • 主要介绍了使用Vue CLI创建typescript项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 ...

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本

    安装命令

    npm install -g @vue-cli
    

    创建项目

    vue create my-vue-typescript
    

    在这里插入图片描述
    上下键选择,空格键确定

    在这里插入图片描述

    接下来是一些常规选项

    在这里插入图片描述

    下面是询问要不要记录这次配置以便后面直接使用,我们选择y

    在这里插入图片描述

    当确定配置后会在C:\Users\Administrator.vuerc下生成一个刚选好的配置记录

    {
      "useTaobaoRegistry": true,
      "presets": {
        "my-vue-typescript": {
          "useConfigFiles": true,
          "plugins": {
            "@vue/cli-plugin-babel": {},
            "@vue/cli-plugin-typescript": {
              "classComponent": true,
              "tsLint": true,
              "lintOn": [
                "save"
              ],
              "useTsWithBabel": true
            }
          },
          "router": true,
          "routerHistoryMode": true,
          "vuex": true
        }
      }
    }
    

    然后再回车就开始创建项目,但是这里却报了一个错,大概意思是源有问题。

    ERROR  command failed: yarn --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist
    

    于是搜了下原因,原来是创建时候的默认源配置导致,vue cli 安装报错问题解决

    在这里插入图片描述

    所以修改下刚才生成的.vuerc下的useTaobaoRegistry属性值为false就可以了

    {
      "useTaobaoRegistry": false,
       ...
    }
    
    展开全文
  • 主要介绍了解决vue cli使用typescript后打包巨慢的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程vue-cli3.0 搭建项目模版教程(ts+vuex+axios)作者:陈小生_1017  我看完教程后(好长的一篇...

      Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程  vue-cli3.0 搭建项目模版教程(ts+vuex+axios) 作者:陈小生_1017

      我看完教程后(好长的一篇博文,不得不服作者的用心,赞!),我去博主留的git地址 https://github.com/chenfangsheng/vue-cli3-tpl.git 克隆一份下来,安装完依赖后,发现好多错误...汗...我在原博客评论区和git issue区均为发现问题的解决办法,我尝试着一番google后,项目能跑起来了,顺便研究了下vuex-class的用法,下面会贴出具体的用法。出现的错误有:

      1.引入scss的路径不对,按照下边改为相对路径就可以了

    // vue-cli3-tpl/src/components/test/test.vue 
    
    ...
    <style lang="scss">
      /*@import "@/assets/scss/variables";*/
      @import "../../assets/scss/variables";
    
      .test-wrap {
        width: 100%;
        color: $background-color;
      }
    </style>
    // vue-cli3-tpl/src/assets/scss/variables.scss
    
     $background-color : #4c94f1;

      为了方便,我们引用scss全局变量,在每一个style标签引入这个公共变量文件太麻烦了,官方有全局引入的方法:

    // vue.config.js
    css: {
        modules: false, // 启用 CSS modules
        extract: true, // 是否使用css分离插件
        sourceMap: true, // 开启 CSS source maps?
        loaderOptions: {
          // 给 sass-loader 传递选项
          sass: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 `src/assets/scss/variables.scss` 这个文件
            data: `@import "@/assets/scss/variables.scss";`
          }
        } // css预设器配置项
      },

      2.TS报错: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'LoginState'.  No index signature with a parameter of type 'string' was found on type 'LoginState'

    // vue-cli3-tpl/src/store/module/login.ts
    // 更改state
    const mutations: MutationTree<LoginState> = {
      // 更新state都用该方法
      UPDATE_STATE(state: LoginState, data: LoginState) {
        for (const key in data) {
          if (!data.hasOwnProperty(key)) { return }
          state[key] = data[key] // TS7053错误
        }
      }
    }

      我们在js中访问对象时,[]中的name的类型必须是string,但是在ts中name的隐式类型为any,所以ts发现没有类型是string的的索引标记。。。解决办法:指定对象中key的类型

    // vue-cli3-tpl/src/types/views/login.interface.ts
    // VUEX login.State 参数类型
    export interface LoginState {
      [key: string]: any
    }

      最后贴下我 vuex-class 的使用:

    // vue-cli3-tpl/src/store/index.ts
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    // modules
    import login from './module/login'
    import index from './module/index'
    
    export default new Vuex.Store({
      state: {
        //
      },
      mutations: {
        //
      },
      actions: {
        //
      },
      modules: {
        login,
        index
      }
    })
    // vue-cli3-tpl/src/store/module/login.ts
    import { LoginState } from '@/types/views/login.interface'
    import { GetterTree, MutationTree, ActionTree } from 'vuex'
    import * as LoginApi from '@/api/login'
    
    const state: LoginState = {
      author: 'edison',
      age: 18,
      obj: null
    }
    
    // 强制使用getter获取state
    const getters: GetterTree<LoginState, any> = {
      getAuthor: (state: LoginState) => state.author
    }
    
    // 更改state
    const mutations: MutationTree<LoginState> = {
      // 更新state都用该方法
      UPDATE_STATE(state: LoginState, data: LoginState) {
        for (const key in data) {
          if (!data.hasOwnProperty(key)) { return }
          state[key] = data[key]
        }
      }
    }
    
    const actions: ActionTree<LoginState, any> = {
      UPDATE_STATE_ASYN({ commit, state: LoginState }, data: LoginState) {
        commit('UPDATE_STATE', data)
      },
      async GET_DATA_ASYN({ commit, state: LoginState }) {
        const result = await LoginApi.getData()
        commit('UPDATE_STATE', {'obj': result.data})
        return result.data
      }
    }
    
    export default {
      namespaced: true,
      state,
      getters,
      mutations,
      actions
    }
    // vue-cli3-tpl/src/views/login/login.ts
    import { Component, Vue } from "vue-property-decorator"
    import {Getter, Action, namespace, State} from "vuex-class"
    import { LoginData } from '@/types/views/login.interface'
    import { Test } from "@/components" // 组件
    
    const LoginModule = namespace('login')
    
    @Component({
      components: {
        Test
      }
    })
    export default class About extends Vue {
      // Getter
      // @Getter login.author
    
      // Action
      // 和 @State("author") author 相同
      @LoginModule.State('author') author!: string
      // 直接映射 @State age
      @LoginModule.State age!: number
      @LoginModule.State obj!: any
    
      /**
       * state映射到组件时,是放在computed下的,因此本身为计算属性
       * */
      // 只从state获取
      @LoginModule.State(state => state.author) author1!: string
      // 从 state 和 getters 上获取
      @LoginModule.State((state, getters) => state.author + getters.getAuthor) author2!: string
    
      // 内部使用namespace 如果不想在外部使用namespace,可以使用参数传递namespace
      @State('author', {namespace: 'login'}) author3!: string
    
      // Getter
      @Getter("login/getAuthor") getAuthor!:string;
      @Getter("getAuthor",{namespace:"login"}) getAuthor1!:string;
      @LoginModule.Getter('getAuthor') getAuthor2!:string;
    
      // Action
      @LoginModule.Action GET_DATA_ASYN!: Function
      @LoginModule.Action UPDATE_STATE_ASYN!: Function
    
      // data
      data: LoginData = {
        pageName: 'login'
      }
    
      created() {
        this.GET_DATA_ASYN()
          .then((data: any) => {
            console.log('data ', data)
            debugger
          })
        console.log('state用法')
        console.log('this.author ', this.author)
        console.log('this.author1 ', this.author1)
        console.log('this.author2 ', this.author2)
        console.log('this.author3 ', this.author3)
        console.log('getter用法')
        console.log('this.getAuthor ', this.getAuthor)
        console.log('this.getAuthor1 ', this.getAuthor1)
        console.log('this.getAuthor2 ', this.getAuthor2)
        console.log('this.age ', this.age)
        console.log('action用法')
        this.UPDATE_STATE_ASYN(
          {
            author: 'edison modified'
          }
        )
        console.log('modified author ', this.author)
      }
    
      activated() {
        //
      }
    
      mounted() {
        //
      }
    
      // 初始化函数
      init() {
        //
      }
    
    }

      参考博文:如何使用 vue + typescript 编写页面 ( vuex装饰器部分 )

    转载于:https://www.cnblogs.com/hanshuai/p/11240571.html

    展开全文
  • vue-cli移除typescript

    2021-08-26 11:07:41
    vue cli添加typescript vue add typescript vue cli 移除typescript 步骤一:移除npm依赖 npm remove @vue/cli-plugin-typescript npm remove typescript 步骤二: 将所有ts文件改为js

    vue cli添加typescript

    vue add typescript

    vue cli 移除typescript

    步骤一:移除npm依赖

    npm remove @vue/cli-plugin-typescript
    npm remove typescript

    步骤二:
    将所有ts文件改为js

    展开全文
  • 本项目是基于vue-cli创建的vue项目,并添加了storybookstorybook-addon-vue-info插件,以及vueTypescript组件写法支持的配置。eslint+ prettier配置支持vscode save autofix 用法 克隆本项目到本地 安装依赖 npm...
  • 基于 vue-cli3 typescript 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板
  • 首先全局安装vue-cli npm install -g @vue/cli 使用vue命令行创建项目 vue create vue-ts 设置 可能出现的报错 Error: Cannot find module 'vue-template-compiler' 解决办法 yarn add vue-template-compiler ...

    全局安装的模块

    npm install -g @yarn // 包管理器
    npm install -g @vue/cli // Vue CLI
    npm install -g vue-template-compiler // 用于Vue编译,防止报错
    

    使用 Vue CLI 方式创建项目

    vue create vue3-ts
    

    以下搭建过程中的相关设置,可根据自己的实际情况设置

    解释

    • Manually select features // 手动选择
    • Check the features needed for your project: // 选择我们所需的选项来生成项目,上下箭头选择,使用空格键选中,回车确认
    • Choose a version of Vue.js that you want to start the project with // 选择 Vue 版本
    • Use class-style component syntax? (Y/n) // 是否使用 Class(类)风格装饰器, 即通过 export default class Home extends Vue{} 创建 Vue 实例
    • Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) // 使用 Babel 做转义, 与 TypeScript 一起用于自动检测
    • Use history mode for router? // 路由模式, 是否选择 history 模式
    • Pick a CSS pre-processor? // 选择一种 css 预处理器
    • Pick a linter / formatter config? // 选择一种代码格式化检测工具
    • Pick additional lint features? // 代码检查方式: 保存时检查 or 提交时检查
    • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? // Babel, PostCSS, ESLin 等配置文件怎么存放, 是放到单独的配置文件中?还是 package.json 里?
    • Save this as a preset for future projects? // 是否需要保存当前配置,在以后的项目中可快速构建?
    • Pick the package manager to use when installing dependencies: // 选择包管理器

    运行项目

    本例中使用的包管理器是 yarn

    yarn 或者 yarn install // 安装依赖(默认已经安装好了)
    npm run serve 或者 yarn serve // 运行项目
    

    WebStorm 开发配置

    Prettier 代码格式化

    Eslint 检查代码样式

    展开全文
  • "scripts": { "serve": "vite", "build": "vite build", "preview": "vite preview" }
  • 主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 如果没有安装 Vue CLI 就先安装 npm install --global @vue/cli 查看Vue CLI版本 vue --version或vue -V 二 创建项目 1 创建项目 vue create vue-demo 2 选择手动预设 default:默认,一路回车就可以新建 ...
  • Vue CLI3+Typescript入门初始化项目环境要求创建项目 环境要求 1. 检查是否安装node.js运行环境 //终端输入 node -v 2. 检查是否安装npmcnpm包管理程序 //终端输入 npm -v cnpm -v // 淘宝镜像专用通道 3. 检查...
  • 一、【VueCli3+】版本说明及需要安装的中间件,以下中间件没有的,就需要安装一哈子 具体代码开源到github,欢迎star 1.1、以下是 VueCli3+ 中的store (Vue + VueCli3+ TavaScript + iviewUI + Vuex) "vue": "^...
  • 主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 命令行:vue create <name> 安装的自定义选项,查看下图 二、安装后,配置项目的eslint+prettier 1、配置.prettierrc.js 代码检查工具选择了Eslint+Prettier时,ESlint与Prettier相冲突的配置项会被...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,824
精华内容 3,129
关键字:

vuecli和typescript

vue 订阅