纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vite+vue3.0+ts+element-plus搭建 vite+vue3.0+ts+element-plus快速搭建项目的实现

火滴雪叶   2021-06-24 我要评论
想了解vite+vue3.0+ts+element-plus快速搭建项目的实现的相关内容吗,火滴雪叶在本文为您仔细讲解vite+vue3.0+ts+element-plus搭建的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vite,vue3.0,ts,element-plus,搭建,下面大家一起来学习吧。

vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容。

vite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。

vite 作用

  • 快速的冷启动:不需要等待打包操作;
  • 即时的热模块更新:替换性能和模块数量的解耦让更新飞起;
  • 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变。

使用的环境

  • node v12.19.0
  • @vue/cli 4.5.8

搭建项目

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev


yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

配置

vite.config.ts

vite.config.ts 相当于 @vue-cli 项目中的 vue.config.js

import path from "path";

const pathResolve = (pathStr: string) => {
  return path.resolve(__dirname, pathStr);
}

const config = {
  base: './',//在生产中服务时的基本公共路径。@default '/'
  alias: {
    '/@/': pathResolve('./src'),
  },
  outDir: 'vite-init',//构建输出将放在其中。会在构建之前删除旧目录。@default 'dist'
  minify: 'esbuild',//构建时的压缩方式
  hostname: 'localhost',//本地启动的服务地址
  port: '8800',//服务端口号
  open: false,//启动服务时是否在浏览器打开
  https: false,//是否开启https
  ssr: false,//是否服务端渲染
  optimizeDeps: {// 引入第三方的配置
    include: ['axios']
  },
  // proxy: {//代理配置
  //   '/api': {
  //     target: 'http://xx.xx.xx.xx:xxxx',
  //     changeOrigin: true,
  //     ws: true,
  //     rewrite: (path: string) => { path.replace(/^\/api/, '') }
  //   }
  // }
}
module.exports = config;

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",//指定ECMAScript的目标版本:'ES3'(默认),'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020',或'ESNEXT'。
    "module": "commonjs",//指定模块代码生成:'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020',或'ESNext'。
    "strict": true,//是否启用所有严格的类型检查选项。
    "baseUrl":"./",//用于解析非绝对模块名称的基本目录。
    "paths": {
      "/@/*": ["./src/*"]
    },  
    "noImplicitAny": true, //对于隐含有'any'类型的表达式和声明引发错误。
    "esModuleInterop": true, //通过为所有导入创建名称空间对象,实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports”。
    "experimentalDecorators": true, //支持对ES7装饰器的实验性支持。
    "skipLibCheck": true, //跳过声明文件的类型检查。
    "forceConsistentCasingInFileNames": true //禁止对同一文件使用大小写不一致的引用。
  }
}

App.vue

修改app.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>

<script>
export default {
  name: 'App',
  setup() {

  }
}
</script>

Views

在 src 下新建 views文件夹,并在文件夹内创建 index.vue

<template>
  <HelloWorld :msg="msg"></HelloWorld>
</template>

<script lang="ts">
import HelloWorld from "/@/views/HelloWorld.vue";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Home",
  components: { HelloWorld },
  setup() {
    return {
      msg: "hello World",
    };
  },
});
</script>

PS:在引入.vue文件时一定要带上后缀名,否则会报找不到文件

在views文件夹内创建 HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="realTime.count++">count is: {{ realTime.count }}</button>
  <button @click="handleclick">点击跳转其它路由</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'Index',
  props: { msg: { type: String, default: '欢迎来到vue3' } },
  setup(props) {
    const router = useRouter();
    let realTime = reactive({ count: 0 });

    function handleclick() {
      router.push({ path: '/other' })
    }
    return {
      msg: props.msg,
      realTime,
      handleclick
    }
  }
})
</script>

router

在 src 下新建 router 文件夹,并在文件夹内创建 index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import("/@/views/index.vue")
  },
]

export default createRouter({
  history: createWebHistory(),
  routes
})

main.ts

把原本的main.js改为main.ts,修改后别忘记把index.html里面也改为main.ts

import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue'
import ElementPlus from 'element-plus'

import 'element-plus/lib/theme-chalk/index.css'
import './reset.css'

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app');

细心的同学这时可能已经发现:在 ts 文件中引入 .vue 文件时出现以下报错,但是不影响代码正常运行

报错原因:typescript 只能理解 .ts 文件,无法理解 .vue文件

解决方法:在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件,并写入以下内容:

declare module '*.vue' { }
declare module '*.js'
declare module '*.json';
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

至此项目搭建完成,可以愉快的写代码了。


相关文章

猜您喜欢

  • AspectJ在android中使用 在Android项目中使用AspectJ的详细攻詻

    想了解在Android项目中使用AspectJ的详细攻詻的相关内容吗,唯鹿在本文为您仔细讲解AspectJ在android中使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:AspectJ在android中使用,android使用AspectJ,下面大家一起来学习吧。..
  • springcloud Feign超时 springcloud之Feign超时问题的解决

    想了解springcloud之Feign超时问题的解决的相关内容吗,Moshow郑锴在本文为您仔细讲解springcloud Feign超时的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:springcloud,Feign超时,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.kuwangame.cn 【酷玩】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式