vue3-项目快速搭建和初始化

环境安装

npm安装

Node.js各版本：Previous Releases | Node.js (nodejs.org)

Linux

从官网下载最新版，文件名中是带了linux字样的，如node-v16.20.0-linux-x64.tar.xz
解压：如果是tar.xz文件，则先用xz -d node-xxxxx.tar.xz现将tar.xz解压为tar包，然后再tar -xvf node-xxx.tar解压；如果是tar.gz文件，则直接tar -zxvf node-xxx.tar.gz解压
将解压目录移动到/usr/local/：mv node-v16.20.0-linux-x64 /usr/local/node
创建软链接：ln -s /usr/local/node/bin/node /usr/bin/node
创建软链接：ln -s /usr/local/node/bin/npm /usr/bin/npm
查看命令的版本：npm -v；node -v

Windows

下载安装node-vxx.x.x-x64.msi

常用配置

设置源

npm config set registry xxxxx   
# npm config set registry=http://registry.npm.taobao.org

设置默认目录

# Linux
npm config set prefix "/usr/local/node/global"
npm config set cache "/usr/local/node/cache"

# Windows
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

安装前端构建工具

vuecli_53">vue-cli脚手架

npm install -g @vue/cli

vite

npm install -g vue@latest 
npm install -g webpack 
npm install -g webpack-cli 
npm install -g vite

安装基本模块

npm install -g element-plus
npm install -g axios
npm install -g vue-router
npm install -g vuex

创建和启动项目

vuecli_83">vue-cli

vue create 项目名称

cd 项目名称
npm install              # 安装模块
npm run serve            # 启动运行

vite

npm init vite-app 项目名称

cd 项目名称
npm install
npm run dev

具体命令，详见vite.config.js配置文件

基本代码框架

引用elementPlus

main.js

// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// icon使用
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用element-plus
app.use(ElementPlus)

vue_137">页面vue框架

vue_139">App.vue

vue"><template>
    <RouterView />
</template>
<script>
export default {
 
}
</script>

vue_152">MainView.vue

src/views/MainView.vue

vue"><template>
  <el-container class="layout-container-demo" >
    <el-aside width="200px" class="aside">   
      <el-scrollbar>
        <h2 style="margin-top:5px;text-align:center;font-weight:bold">C I S P</h2>
        <el-menu :default-openeds="['1']" :router="true">
          <el-menu-item index="/">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header>
        <div class="toolbar">
          <el-dropdown>
            <el-icon ><setting /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item><el-button link @click="userLogout">LogOut</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>  James </span>
        </div>
      </el-header>

      <el-main class="middle">
          <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

vue_195">Login.vue

src/views/Login.vue

vue"><template>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 500px">
        <div class="clearfix" style="text-align:center">
          <h2>用户登录</h2>
        </div>
        <table style="margin-top:40px;width:100%">
          <tr>
            <td>用户</td>
            <td>
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
                <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter="doLogin"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button style="width: 50%;margin-left:25%;margin-top:20px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

关于登录，可详见本人《vue3-简单登录认证前端实现样例-CSDN博客》一文。

路由设置

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../views/MainView.vue'
import LoginView from '../views/LoginView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainView
    },
    {
    path: '/aaa',
      name: 'aaa',
      component: MainView,
      children:[
        {
          path: 'aaa/bbb',
          name: 'aaa_bbb',
          component: () => import('@/components/xxxx.vue'),
          meta:{
          }
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: LoginView,
      meta:{title:"登录"}
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NoFound',
        component: () => import('@/components/404.vue'),
        meta:{title:"404"}
    },
  ]
})