[JavaScript知识库]0.从零搭建VUE项目，语言使用TypeScript

写在前面

由于自己在2015年以来，一直从事的工作使用React技术栈，慢慢发现，Vue很火，自己利用业余休息时间研究研究它，至于优劣，等我研究完Vue，会对react和vue做个比较。特对此学习过程做出记录，希望业内人士批评指正。

准备

你需要安装nodejs，如已安装，请跳过。

项目创建

1. Install Vue CLI, 如果尚未安装

npm install --global @vue/cli@next --registry=https://registry.npm.taobao.org

2.创建一个新项目, 选择 “Manually select features” 选项

vue create my-project-name

3. 如果已经有一个不存在TypeScript的 Vue CLI项目，请添加适当的 Vue CLI插件：

vue add typescript

搭建路由

1. 安装UI库，可以选用ElementUI，也可以选用Antd，我这里使用了ElementUI，方法参见其官方文档

npm install element-plus --save

2. 创建按需引用组件注册：registerComponents.ts

import 'element-plus/packages/theme-chalk/src/base.scss'
import { ElButton, ElSelect } from 'element-plus';
import { App } from 'vue';
export const registerComponents = (app: App) => {
    app.use(ElButton)
    app.use(ElSelect)
}

3. 创建组件

• helloworld组件

<template>
  <div class="hello">
    <Children msg="欢迎使用vue"></Children>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Children from "./Children.vue";
export default defineComponent({
  name: "HelloWorld",
  components: {
    Children,
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

• children组件

<template>
  <div class="children">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    msg: String,
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

• about组件

<template>
  <div class="hello">
    <el-button>我是elementui</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

4. 创建路由配置文件routes.ts

import HelloWorld from './components/HelloWorld.vue';
import About from './components/About.vue';


export const routes = [
    { path: '/', component: HelloWorld },
    { path: '/about', component: About }
]

5. 创建程序入口UI：App.vue

<template>
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</template>

<script lang="ts">
import {  Vue } from 'vue-class-component';
//  
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 创建程序入口文件：main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from './routes'
import { registerComponents } from './registerComponents'

const router = createRouter({
    history: createWebHistory(),
    routes,
});
const app=createApp(App);
app.use(router);
registerComponents(app)
app.mount('#app');

效果图

1. helloworld页面
   

2. about页面

注意事项

如出现：

1. sass-loader版本太高，降为7.0.3

Syntax Error: TypeError: this.getOptions is not a function