蚌埠企业做网站,软件技术好学吗,wordpress缺少临时文件夹,网站页面设计报价文章目录 一、Vue3 创建项目二、Vue3 Create详解命令格式可选选项使用示例注意事项 三、Vue3 项目目录结构四、Vue3 起步实例五、相关链接 一、Vue3 创建项目
在 Vue 3 中创建项目#xff0c;通常使用 Vue CLI#xff08;命令行工具#xff09;来简化项目的初始化过程。Vue… 文章目录 一、Vue3 创建项目二、Vue3 Create详解命令格式可选选项使用示例注意事项 三、Vue3 项目目录结构四、Vue3 起步实例五、相关链接 一、Vue3 创建项目
在 Vue 3 中创建项目通常使用 Vue CLI命令行工具来简化项目的初始化过程。Vue CLI 是一个强大的工具它可以帮助你快速搭建 Vue.js 项目并且内置了对 Vue Router、Vuex、CSS 预处理器、PWA 支持、单元测试等的集成。
以下是使用 Vue CLI 创建 Vue 3 项目的步骤
安装 Node.js 和 npm/yarn
确保你的计算机上安装了最新版本的 Node.js 和 npmNode.js 的包管理器。npm 会随同 Node.js 一起安装。你也可以选择安装 yarn它是一个流行的替代包管理器。
安装 Vue CLI
在安装了 Node.js 和 npm/yarn 之后你需要全局安装 Vue CLI。打开终端或命令提示符然后运行以下命令之一来安装 Vue CLI
使用 npm
npm install -g vue/cli
npm install -g vue/clinext # 如果要安装最新版本的 Vue CLI包括 Vue 3 支持使用 yarn
yarn global add vue/cli
yarn global add vue/clinext # 如果要安装最新版本的 Vue CLI包括 Vue 3 支持安装完成后你可以通过运行 vue --version 来验证 Vue CLI 是否正确安装。
创建 Vue3 项目
使用 Vue CLI你可以通过以下命令创建一个新的 Vue3 项目。请将 my-vue3-project 替换为你想要的项目名称
vue create my-vue3-project这个命令会启动一个交互式的命令行界面询问你一些问题以定制项目的配置。你可以选择默认配置Default来快速创建一个项目或者手动选择特性Manually select features来定制你的项目。在配置选项中确保选择了 Vue 3 作为项目的版本。
此外Vue CLI 还提供了一个快捷方式来直接创建 Vue 3 项目使用 -- --next 标志
vue create my-vue3-project -- --next这个命令将直接为你创建一个使用 Vue 3 的项目。
进入项目目录
创建项目后你需要进入项目的目录以开始开发。使用以下命令切换到你的项目目录
cd my-vue3-project运行项目
在项目目录中你可以使用以下命令之一来启动开发服务器
使用 npm
npm run serve使用 yarn
yarn serve这将启动一个本地开发服务器并在浏览器中自动打开一个新的标签页显示你的 Vue3 应用。默认情况下应用将在 http://localhost:8080 上运行。
开发你的应用
现在你可以开始开发你的 Vue3 应用了。在 src 目录下你会找到主要的项目文件如 App.vue应用的根组件和 main.js应用的入口文件。你可以根据需要编辑这些文件和其他文件来构建你的应用。
构建生产版本
当你的应用开发完成并准备部署到生产环境时你可以使用以下命令之一来构建项目的生产版本
使用 npm
npm run build使用 yarn
yarn build这将创建一个优化过的、用于生产环境的版本在你的项目目录下的 dist 文件夹中。
部署应用
构建完成后你可以将 dist 文件夹中的内容部署到你的 Web 服务器或静态文件托管服务上以便让其他人能够访问你的 Vue3 应用。
二、Vue3 Create详解
vue create 命令是 Vue CLI 中的一个重要命令用于创建新的 Vue.js 项目。这个命令提供了丰富的配置选项允许开发者根据项目需求定制项目结构和依赖项。以下是 vue create 命令的详细解释和一些常用的选项
命令格式
vue create project-name其中 project-name 是你想要创建的新项目的名称。
可选选项
-p 或 --preset presetName忽略提示符并使用已保存或远程的预设选项。预设是一组预定义的配置选项可以用来快速创建具有特定功能的项目。-d 或 --default忽略提示符并使用默认预设选项。这将使用 Vue CLI 的默认配置来创建项目。-i 或 --inlinePreset json忽略提示符并使用内联的 JSON 字符串预设选项。你可以直接提供一个 JSON 字符串来定义项目的配置。-m 或 --packageManager command在安装依赖时使用指定的 npm 客户端。例如你可以使用 yarn 代替 npm。-r 或 --registry url在安装依赖时使用指定的 npm registry。这允许你使用私有 registry 或镜像源。-g 或 --git [message]强制或跳过 git 初始化并可选地指定初始化提交信息。-n 或 --no-git跳过 git 初始化。-f 或 --force覆写目标目录可能存在的配置。-c 或 --clone使用 git clone 获取远程预设选项。-x 或 --proxy使用指定的代理创建项目。-b 或 --bare创建项目时省略默认组件中的新手指导信息。-h 或 --help输出使用帮助信息。
使用示例
使用默认配置创建项目
vue create my-project这将启动一个交互式的命令行界面询问你一些问题来定制项目配置。
使用预设创建项目
如果你有一个预定义的预设文件例如 my-preset.json你可以使用 -i 选项来直接应用它
vue create my-project -i my-preset.json跳过 git 初始化
如果你不想在创建项目时初始化 git可以使用 -n 选项
vue create my-project -n指定 npm 客户端
如果你想使用 yarn 而不是 npm 来安装依赖可以使用 -m 选项
vue create my-project -m yarn注意事项
当你运行 vue create 命令时它会根据你的选择下载和安装相应的依赖项并为你创建一个新的 Vue.js 项目目录结构。在执行 vue create 命令之前确保你已经安装了最新版本的 Node.js 和 Vue CLI。根据你的需求和偏好选择适当的选项来定制你的项目配置。
三、Vue3 项目目录结构
Vue3 项目的目录结构通常包含以下主要部分
node_modules这个目录包含了项目运行所依赖的所有 npm 包。这些包是通过运行 npm install 或 yarn install 命令安装的。public这个目录包含静态资源这些资源不会被 webpack 处理而是直接被复制到最终的构建目录中。常见的文件包括
index.html项目的入口 HTML 文件通常包含了应用的根元素和一些初始化的 JavaScript 代码。favicon.ico网站的图标文件。其他静态资源如图片、字体等。
src这是项目的源代码目录包含了所有的 Vue 组件、JavaScript 代码、样式文件等。
assets存放静态资源如图片、字体文件、CSS 文件等。components存放 Vue 组件文件这些组件通常是可复用的 UI 元素。views或 pages存放页面级别的 Vue 组件每个组件通常对应一个路由页面。router存放 Vue Router 的配置文件定义了路由规则和页面之间的导航。store如果项目使用 Vuex 进行状态管理这里会存放 Vuex 的相关文件。App.vueVue 应用的根组件通常包含了整个应用的布局和路由视图。main.js或 main.ts项目的入口文件用于初始化 Vue 应用、导入全局样式和配置等。App.vue根组件文件包含了整个应用的布局和路由视图。main.js项目的入口文件用于实例化 Vue 应用并导入所需的插件、组件和样式。
.gitignore这个文件用于配置哪些文件不应该被 Git 跟踪即不会被提交到版本控制系统中。package.json这是项目的配置文件包含了项目的元信息、依赖项、脚本命令等。你可以通过运行 npm install 或 yarn install 命令来根据这个文件安装项目依赖。README.md这是项目的说明文档通常包含了项目的介绍、运行命令、贡献指南等信息。vue.config.js可选这是 Vue CLI 的项目配置文件用于修改默认的 webpack 配置和其他 Vue CLI 的配置。
四、Vue3 起步实例
在 Vue 3 中起步实例代码通常包括以下几个步骤
创建一个 Vue 应用实例。定义应用的根组件。挂载这个实例到 DOM 中的某个元素上。
下面是一个简单的 Vue 3 起步实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 3 Starter/title!-- 引入 Vue 3 --script srchttps://unpkg.com/vue3/script
/head
body!-- 定义挂载点 --
div idapp!-- 使用双花括号插值显示消息 --{{ message }}!-- 使用 v-bind 指令绑定属性 --button v-bind:disabledisButtonDisabledClick Me/button!-- 使用 v-on 指令监听点击事件 --button v-on:clicktoggleButtonToggle Button/button
/div!-- Vue 3 实例代码 --
scriptconst app Vue.createApp({// 定义数据data() {return {message: Hello Vue 3!,isButtonDisabled: false}},// 定义方法methods: {toggleButton() {this.isButtonDisabled !this.isButtonDisabled;}}});// 挂载实例app.mount(#app);
/script/body
/html在这个例子中我们做了以下几件事
在 HTML 文件中引入了 Vue 3 的 CDN 链接。创建了一个带有 ID app 的 div 元素作为 Vue 实例的挂载点。在 script 标签中使用 Vue.createApp 方法创建了一个 Vue 应用实例。在 Vue 实例中定义了 data 函数来返回初始数据对象其中包含了 message 和 isButtonDisabled 两个属性。在 methods 对象中定义了一个 toggleButton 方法用于切换按钮的禁用状态。使用 app.mount(#app) 将 Vue 实例挂载到 ID 为 app 的 DOM 元素上。
现在当你在浏览器中打开这个 HTML 文件时你应该能看到 “Hello Vue 3!” 的消息以及两个按钮。第一个按钮的禁用状态会根据第二个按钮的点击而切换。
五、相关链接
Vue3官方地址Vue3中文文档「Vue3系列」Vue3简介及安装
