首页为什么挂在后，文件会存放在/path/to/mount/default下面

为什么挂在后，文件会存放在/path/to/mount/default下面

时间: 2023-12-09 16:06:34 浏览: 57

VUE3脚手架工具cli搭建配置及路由使用

### VUE3脚手架工具CLI搭建配置及路由使用 #### 一、VUE CLI工具安装与配置 **1.1 安装 Node.js 和 npm** - **下载 Node.js**: 访问官网 [https://nodejs.org/en](https://nodejs.org/en/)，选择适合您操作系统的最新稳定版本进行下载。 - **安装 Node.js**: 安装过程简单，按照向导进行即可。安装完成后，在安装目录下创建 `node_cache` 和 `node_global` 两个目录。这两个目录的作用分别为： - `node_cache`: 用于缓存npm下载的模块。 - `node_global`: 存储全局安装的模块。 - **配置 npm 默认路径**: - 使用以下命令配置缓存和全局模块路径： ```bash npm config set prefix "C:\Program Files\nodejs\node_global" npm config set cache "C:\Program Files\nodejs\node_cache" ``` - **配置环境变量**: - 在系统环境中添加或编辑环境变量，确保Node.js能够被正确识别。 - **测试安装**: - 打开命令行工具，输入 `node -v` 和 `npm -v` 来确认Node.js和npm是否安装成功及其版本号。 **1.2 修改 npm 默认镜像地址** - **查看默认镜像地址**: - 使用 `npm config get registry` 命令查看当前npm默认使用的镜像地址。 - **修改镜像地址**: - 国内用户推荐使用淘宝镜像，可以提高下载速度。执行以下命令来更改镜像地址： ```bash npm config set registry https://registry.npm.taobao.org/ ``` **1.3 安装 cnpm** - **安装 cnpm**: - 使用以下命令安装 cnpm，cnpm是中国镜像的一个包管理器，适合中国用户使用。 ```bash npm install -g cnpm --registry=https://registry.npm.taobao.org ``` - **测试安装**: - 输入 `cnpm -v` 查看是否安装成功。 **1.4 安装 nrm** - **安装 nrm**: - 使用以下命令安装 nrm，它是一个npm镜像源管理工具。 ```bash npm install -g nrm open@8.4.2 --save ``` - **测试安装**: - 输入 `nrm -v` 查看是否安装成功。 **1.5 清除旧版本脚手架** - 如果之前已安装过旧版本的脚手架工具，需先将其清除。 - **清除命令**: - `npm uninstall -g @vue/cli` **1.6 安装 Vue 3 脚手架工具** - **安装指定版本**: - 使用以下命令安装特定版本的Vue CLI工具（如版本 5.0.8）： ```bash npm install @vue/cli@5.0.8 ``` - **安装最新版本**: - 使用以下命令安装最新版本的Vue CLI工具： ```bash npm install –g @vue/cli ``` #### 二、使用 Vue CLI 创建项目 **2.1 创建 Vue 工程** - **切换到目标目录**: - 使用 `cd` 命令切换到您希望创建项目的目录。 - **创建项目**: - 执行以下命令创建Vue工程： ```bash vue create vuedemo ``` - 其中 `vuedemo` 为项目名称。 - **选择功能**: - 选择第三个选项 `Manually select features`。 - **选择组件**: - 通过空格键选择所需的组件，例如 Vue Router 和 Vuex。 - **选择 Vue 版本**: - 选择所需的Vue版本，这里选择 Vue 3。 - **选择 ESLint**: - 选择第一个选项 `Lint on warning`。 - **选择 lint 校验状况**: - 选择 `Lint on save`。 - **选择配置文件存放位置**: - 选择 `In dedicated .eslintrc file`。 - **保存创建步骤**: - 选择是否将刚才的创建步骤保存为预设。 - **启动项目**: - 进入项目目录，并运行 `npm run serve` 来启动项目。 - **访问项目**: - 打开浏览器访问 `http://localhost:8080`。 #### 三、使用 Vue Router **3.1 创建 Vue Router** - 在 `src/router/index.js` 文件中配置 Vue Router。 - **基本配置**: - 导入 Vue 和 Vue Router，创建路由实例，定义路由规则，然后将路由实例暴露出去。 - 示例代码如下： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home }, // ... 其他路由规则 ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` **3.2 使用 Vue Router** - 在 `src/main.js` 文件中导入并使用 Vue Router。 - 示例代码如下： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router).mount('#app'); ``` #### 四、使用 Vuex **4.1 安装 Vuex** - 在项目根目录下运行以下命令来安装 Vuex： ```bash npm install vuex --save ``` **4.2 配置 Vuex** - 在 `src/store/index.js` 文件中配置 Vuex。 - 示例代码如下： ```javascript import { createStore } from 'vuex'; const store = createStore({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment({ commit }) { commit('increment'); } } }); export default store; ``` **4.3 使用 Vuex** - 在 `src/main.js` 文件中导入并使用 Vuex。 - 示例代码如下： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; const app = createApp(App); app.use(store); app.use(router).mount('#app'); ``` #### 五、使用单文件组件编写TodoList **5.1 准备工作** - 在 `src/components` 目录下创建一个新的组件文件，例如 `TodoList.vue`。 - **文件结构**: - `<template>`: HTML 结构。 - `<script>`: 业务逻辑。 - `<style>`: 样式。 **5.2 实现TodoList** - **基础结构**: - 定义一个表单，用于输入待办事项。 - 显示待办事项列表。 - 提供删除待办事项的功能。 - **示例代码**: ```vue <template> <div> <h1>Todo List</h1> <form @submit.prevent="addTodo"> <input type="text" v-model="newTodo" placeholder="New todo..."> <button>Add</button> </form> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo.text }} <button @click="removeTodo(index)">Delete</button> </li> </ul> </div> </template> <script> export default { data() { return { newTodo: '', todos: [] }; }, methods: { addTodo() { if (this.newTodo.trim()) { this.todos.push({ text: this.newTodo }); this.newTodo = ''; } }, removeTodo(index) { this.todos.splice(index, 1); } } }; </script> <style scoped> /* 样式代码 */ </style> ``` 通过以上步骤，您可以成功地安装和配置Vue CLI，创建Vue项目，设置路由，使用Vuex进行状态管理，并实现一个简单的TodoList应用。这些基础技能对于使用Vue进行前端开发非常重要。

当你将某个目录挂载到另一个目录时，它就会覆盖目标目录中的所有内容。也就是说，如果你将一个目录挂载到`/path/to/mount/default`，那么任何在`/path/to/mount/default`中的文件都将被覆盖，而被挂载的目录中的文件会出现在`/path/to/mount/default`中，因此它们似乎是在这个目录下创建的。实际上，这些文件仍然存储在挂载目录中，只是通过挂载点进行访问。如果你想了解更多关于 Linux 挂载的信息，可以查看 Linux 的手册页 `mount(8)`。

阅读全文