npm install

npm run serve

npm run build

npm run lint

{
  "name": "vue3-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "ant-design-vue": "^2.0.0-rc.5",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "vuex": "^4.0.0-rc.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

npm install -g @vue/cli@next

$ vue -V
@vue/cli 4.5.4

vue create vue3-demo

? Please pick a preset: (Use arrow keys)
> true ([Vue 2] dart-sass, babel, typescript, router, vuex, unit-mocha, e2e-cypr
ess)
 Default ([Vue 2] babel, eslint)
 Default (Vue 3 Preview) ([Vue 3] babel, eslint)
 Manually select features Vue 3

cd vue3-demo  //进入文件
npm run serve // 运行项目

├─.gitignore
├─ .git
├─ node_modules
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─src
|  ├─App.vue
|  ├─main.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico
|   └index.html

npm i postcss postcss-loader autoprefixer@9.8.6 -D

//创建 postcss.config.js
touch postcss.config.js

// postcss.config.js
module.exports = {
	plugins: [
		// 配置 Autoprefixer 插件
		require('autoprefixer')({
            // 游览器最近的两个版本
			'overrideBrowserslist': ['last 2 versions']
		})
	],
};

<template>
  <div>123</div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style scoped>
	div {
		display: flex;
	}
</style>

div {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

npm install sass sass-loader -D

<!-- App.vue -->
<template>
  <div>123</div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style lang="scss" scoped>
	$color: #f00;
	div {
		display: flex;
		color: $color,
	}
</style>

npm i ant-design-vue@next -D

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

<template>
	<a-layout id="components-layout-demo-custom-trigger">
		<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
			<div class="logo" />
			<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
				<a-menu-item key="home">
					<HomeOutlined />
					<span>Home</span>
				</a-menu-item>
				<a-sub-menu key="sub1">
					<template #title>
						<span>
							<user-outlined />
							<span>User</span>
						</span>
					</template>
					<a-menu-item key="user"> Tom</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</a-layout-sider>
		<a-layout>
			<a-layout-header style="background: #fff; padding: 0">
				<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
				<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
			</a-layout-header>
			<a-layout-content class="main">
				<router-view></router-view>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>
<script>
	import {
		UserOutlined,
		HomeOutlined,
		MenuUnfoldOutlined,
		MenuFoldOutlined
	} from '@ant-design/icons-vue';

	export default {
		components: {
			UserOutlined,
			HomeOutlined,
			MenuUnfoldOutlined,
			MenuFoldOutlined
		},
		data() {
			return {
				selectedKeys: ['home'],
				collapsed: false,
			};
		},
		methods: {
			
		}
	};
</script>
<style lang="scss" scoped>
	#components-layout-demo-custom-trigger {
		height: 100vh;

		.trigger {
			font-size: 18px;
			line-height: 64px;
			padding: 0 24px;
			cursor: pointer;
			transition: color 0.3s;

			&:hover {
				color: #1890ff;
			}
		}

		.logo {
			height: 32px;
			background: rgba(255, 255, 255, 0.2);
			margin: 16px;
		}

	}

	.main {
		margin: 24px 16px;
		padding: 24px;
		background: #fff;
		height: calc(100% - 64px);
	}
</style>

npm install vue-router@4 

<template>
	Home
</template>

<template>
	User
</template>

import {
	createRouter,
	createWebHashHistory
} from 'vue-router'

const Home = ()=> import('./../views/home.vue')
const User = ()=> import('./../views/user.vue')

const routes = [{
		path: '/home',
		name: 'home',
		component: Home
	},
	{
		path: '/user',
		name: 'user',
		component: User
	},
	{
		path: '/',
		redirect: '/home',
		component: Home
	}
]
export default createRouter({
	history: createWebHashHistory(),
	routes
});

//main.js
import router from './router/index.js'
...
app.use(router)

methods: {
    menuClick(e) {
       // 路由跳转
        this.$router.push(e.key)
    }
}

npm install vuex@next -D

import {
	createStore
} from 'vuex'

export default createStore({
	// 存放状态
	state:{
		count: 0
	},
	mutations: {
		// 操作
		increment(state) {
			state.count++
		}
	},
    actions: {
    
    },
    modules: {
    
    }
})

import store from './store/index.js'
...
app.use(store)

<template>
	<div>使用count 这个状态{{this.$store.state.count}}</div>	
	<a-button @click="add" type="primary">点击状态加一</a-button>
</template>

<script>
	export default {
		methods: {
			add() {
				this.$store.commit('increment')
			}
		}
	}
</script>