Giter Site home page Giter Site logo

member-points-system's Introduction

一、创建项目

npm init -y

二、初始化git仓库

git init

三、初始化vue项目 -- 创建项目会自动写好

1、package.json的依赖

"scripts": { // 脚本 启用命令
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
},
"dependencies": { // 依赖
    "vue": "^3.2.26"
},
"devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0",
    "less": "^4.1.3",
    "typescript": "^4.6.4",    
    "vue-tsc": "^1.0.8"
},

2、模板文件 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>

3、应用启动(入口)脚本 src/main.js - vue

import {createApp} from 'vue' // 导入vue创建应用的函数
import App from './App' // 主页

# 创建应用并挂载到模板
createApp(App).mount('#app')

四、启动项目

npm i # 安装依赖
npm run dev # 运行

其他

VUE的组件

属性

// 不适用setup的属性
export default {
    props:['title','content','...'] // 直接在数组中定义所需要的属性,缺点:没有办法限制值
    props:{
        title:String, // 定义类型
        content:{
            type: String, // 类型
            required: true, // 是否必须 
            default:''  // 默认值
        }
    }
}
// 使用setup的属性
defineProps(['title','content','...'])// 不指定类型
defineProps({
    title:String, // 定义类型
    content:{
        type: String, // 类型
        required: true, // 是否必须 
        default:''  // 默认值
    }
})
// 使用
<组件名称 title="xxx" content="" />

TS的基本语法

// 定义类型 class A{} // 定义类 interface B { // 定义接口 name: string; } type C = { age: number; b: B; } // 使用类型 const a: A = {} const b: A | B | C | null | undefined = null const c: {id:number;name:string} = {id:0,name:''} // 在方法上使用类型 - 泛型方法 方法名<类型1,类型2>();

git add . / git add xxx git commit -m "xxx" git push 分支

member-points-system's People

Contributors

callmeyan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.