vue3项目搭建

vue3项目搭建

1. 下载vite构建工具

npm init @vitejs/app 项目名称

2. router安装

npm install vue-router -S
//在src目录新建router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
//在main.js上挂载router
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
const app = createApp(App)
app.use(router)
app.mount('#app')

3. 新建views目录
4. 下载一些插件

//插件1 unplugin-auto-import
//插件2 element-plus-引入组件，配置修改，按需引入
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
//引入插件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
  	vue(),
  	//配置插件
  	AutoImport({
      resolvers: [ElementPlusResolver()],
  		imports:['vue','vue-router']
  	}),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});
//插件3 sass
	"node-sass": "^4.14.1",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",

5. 样式重置-引入到main.js全局生效

    html {
    overflow-x: auto;
    overflow-y: scroll;
    }
    body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td {
    font-weight: 400;
    margin: 0;
    padding: 0;
    }
    h1,h2,h3,h4,h4,h5 {
    margin: 0;padding: 0;}
    body {
    background-color: #FFFFFF;
    color: #666666;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
     padding: 0;
     text-align: left;
     }
     select {
     font-size: 12px;
     }
     table {
     border-collapse: collapse;}

fieldset,
img {
  border: 0 none;
}

fieldset {
  margin: 0;
  padding: 0;
}

fieldset p {
  margin: 0;
  padding: 0 0 0 8px;
}

legend {
  display: none;
}

address,
caption,
em,
strong,
th,
i {
  font-style: normal;
  font-weight: 400;
}

table caption {
  margin-left: -1px;
}

hr {
  border-bottom: 1px solid #FFFFFF;
  border-top: 1px solid #E4E4E4;
  border-width: 1px 0;
  clear: both;
  height: 2px;
  margin: 5px 0;
  overflow: hidden;
}

ol,
ul {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}

caption,
th {
  text-align: left;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: ””;
}