Vue3项目搭建(vite)

1:先安装node.js
在安装目录下新建两个文件夹【node_global】和【node_cache】
npm config set prefix "D:xxx\node_global"
npm config set cache "D:xxx\node_cache"

2:配置环境变量

1. 配置环境变量： 找到电脑环境变量位置，然后在系统变量中创建%NODE_HOME%路径为D:xxx.然后选择 Path 修改和添加如下属性：
   %NODE_HOME% %NODE_HOME%\node_cache %NODE_HOME%\node_global

        node -v测试是否成功

        npm config set registry https://registry.npm.taobao.org 使用阿里的国内镜像进行加速

        npm install -g cnpm --registry=https://registry.npmmirror.com全局安装CNPM

3:vue3项目搭建

        1.cd到想创建项目的目录

        2.cnpm init vite 项目名称  输入y后一直等待 选择vue javascipt 

        3.cd 项目名称   cnpm install

        4.pycharm打开项目

        5.安装常用第三方库

cnpm install vue-router@4 -S   第四版本  next是最新版本

cnpm install axios

1.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;

。

2.src里新建views目录 并在里面建立Home.vue About.vue

3:App.vue里只留这三行  因为项目打开后会主动找App.vue 改完后会主动找Home首页

router-view 当你的路由path 与访问的地址相符时，会将指定的组件(开局是Home)替换该 router-view

<template>
  <router-view></router-view>
</template>

4.main.js挂载router

import router from "./router/index.js"   等于 ./router  会自己找index.js
createApp(App).use(router).mount('#app')

5.src中新建store文件夹并创建index.js 安装状态管理库pinia与持久化插件

cnpm install pinia  cnpm install pinia-plugin-persist

在index.js里写入

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

然后在main.js里引入并挂载

import store from './store/index.js'
createApp(App).use(router).use(store).mount('#app')

6.element-plus

cnpm install element-plus

cnpm install @element-plus/icons-vue    图标

main.js中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

图标使用

全局

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

    app.component(key, component)

}

app.use(router).use(store).use(ElementPlus).mount('#app')

局部

import {Female} from '@element-plus/icons-vue'

components:{
    Female
} 不用setup要注册

<el-icon size="20"><Female /></el-icon>

其余使用按照说明复制即可