Vue3.0+Ts环境搭建

一、vue3环境搭建

1.检查本地环境

如果脚手架过低 npm uninstall vue-cli -g 

npm install -g @vue/cli

2.创建项目 vue create 项目名字,选择重新创建一个项目

3.根据自己的需求选择自己需要的选项

Babel:使用babel,便于将我们源代码进行转码(把es6=>es5)
TypeScript:使用TypeScript进行源码编写,使用ts可以编写强类型js,对我们的开发有很大的好处
Progressive Web App(PWA):使用渐进式网页应用(PWA)
Router:使用vue-router
Vuex:使用vuex状态管理器
CSS Pre-processors:使用CSS预处理器,比如:less,sass等
Linter/Formatter:使用代码风格检查和格式化
Unit Testing:使用单元测试
E2E Testing:使用E2E测试, end to end(端到端)是黑盒测试的一种

 

4.选择安装的配置

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模式,启用history模式,项目build之后,可能会出现打开页面空白的情况哦


Pick a CSS pre-processor?
选择一种css 预处理器

Pick a linter / formatter config?
选择一种代码格式化检测工具
TSLint: ts格式检验工具
ESLint with error prevention only: ESLint 只会进行错误提醒
ESLint + Airbnb config: ESLint Airbnb标准
ESLint + Standard config: ESLint Standard 标准
ESLint + Prettier: ESLint(代码质量检测)+ Prettier(代码格式化工具)

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

Save this as a preset for future projects?
是否需要保存当前配置,在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置

 5.等待下载安装完成就ok了

注意:刚安装时候 由于环境问题可能会安装失败报错(记录一下)

解决方法

找到C:\Users\Administrator\.vuerc这个文件
设置packageManager为npm


可参考这篇文章
https://www.cnblogs.com/Anthony518/p/12054632.html

二、vue3 新增 Composition API 的一些特性 setup()、computed()和 watch(),Composition API 可以把复杂组件的逻辑变得更为紧凑,使代码有更高复用性和灵活性。

<template>
  <router-view/>
  <div id="nav"> 
    {{msg}} ---- {{name}}---{{age}}
    <input type="text" v-model="age">
    <input type="text" v-model="msg">
  </div>
</template>

<script>
import { reactive, ref,toRefs,onMounted,watchEffect,watch,computed } from 'vue'
export default {
  setup(){
    const msg=ref('我是一条msg')
    const user=reactive({
      name: '张三',
      age:20
    })
    onMounted(()=>{
      console.log("我是onMounted")
    })
    //watchEffect和watch的区别   
    //1.watch懒执行,也就是说仅在侦听的源变更时才执行回调;watchEffect默认会执行一次
    //2.更明确哪些状态的改变会触发侦听器重新运行;
    //3.访问侦听状态变化前后的值
    watchEffect(()=>{
      // console.log(user.age)
    })
    const state = reactive({
      id: 1,
      attributes: {
        name: ''
      }
    })
    watch(() => state,(state, prevState) => {
      console.log('not deep ', state.attributes.name, prevState.attributes.name)
    })
    const count = ref(1)
    // 创建一个只读性计算属性,依赖于count值
    const plusOne = computed(() => count.value + 1)
    console.log(plusOne.value) // 2
    //plusOne.value++ // error 该计算属性为只读属性,不可写
    return{
      msg,
      plusOne,
      ...toRefs(state),
      ...toRefs(user),
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

三、vue3 集成Ant Design Vue 

1.Ant Design Vue 官网

https://2x.antdv.com/docs/vue/getting-started-cn

2.main挂载Ant Design Vue

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(store).use(router).use(Antd).mount('#app')

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3.0是一个非常流行的JavaScript框架,不仅易于学习和使用,而且可以与许多UI框架集成。ElementUI是一种流行的UI框架,提供了许多易于使用的UI组件和效果。在Vue 3.0中,可以使用TypeScript(TS)编写代码,提供了更好的类型安全和代码可读性。下面是在Vue 3.0中引用ElementUI的步骤: 1. 安装ElementUI:可以使用npm或yarn命令安装ElementUI ``` npm i element-plus -S ``` 2. 使用TypeScript的话需要安装依赖 `ts` 和 `webpack`(如果没有的话) ``` npm i webpack webpack-cli webpack-dev-server typescript ts-loader -D ``` 3. 在Vue项目中引入ElementUI样式和组件: 3.1 引入样式(会自动挂载到全局样式表上) ```scss // main.ts import 'element-plus/dist/index.css' ``` 3.2 引入组件 ```js // main.ts or other entry file import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/styles/index.css' // 引入组件样式 const app = createApp(App) app.use(ElementPlus) // 注册全局组件 app.mount('#app') ``` 这样就可以通过引入ElementPlus来使用ElementUI组件了。例如,在Vue 3.0中使用一个按钮组件: ```vue <template> <el-button type="primary">click me</el-button> </template> <script lang="ts"> import { defineComponent } from 'vue' import { ElButton } from 'element-plus' export default defineComponent({ name: 'MyButton', components: { ElButton } // 局部注册组件 }) </script> ``` 总的来说,引用ElementUI到Vue 3.0中相对比较简单,只需要安装依赖与组件后进行注册即可正常使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值