一:创建vue.js模板项目的步骤
- 安装Node.js
- 安装npm命令
- 安装vue.js脚手架(常见脚手架:vue-cil和vite,在此学习vite)
- 安装vue.js模板项目
- 安装vue.js项目的依赖文件
- 使用npm run dev 命令开发环境,使Vue.js项目运行起来
- 使用npm run build 命令发布项目的部署文件
补充:vite创建vue项目
- 新建文件夹,点击文件路径,输入cmd打开命令行
- 输入npm init vite(确保已经提前安装了node.js)回车
- 取项目名字
- 选择vue框架,回车
- 选择javascript
- 按照提示,cd vue3-project进入文件,安装依赖npm install
- 启动服务器npm run dev
注意:在启动服务器的时候常会见到两种命令npm run dev
和npm run serve
A. 如果使用 Vue CLI 创建了项目,通常在package.json
中的scripts
部分会定义以下命令:
在这种情况下,应使用"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }
npm run serve
来启动开发服务器。serve
是 Vue CLI 默认的启动命令。
B. 如果使用 Vite 创建了项目,package.json
中的scripts
部分可能会定义类似于以下的命令:
在这种情况下,使用json "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }
npm run dev
启动开发服务器。dev
是 Vite 默认的启动命令。 - 赋值URL到导航栏打开
- 得到页面
二.vue项目模板结构中几个常用部分结构的作用:
-
vite.config.js:
作用:配置 Vite 的行为和功能,例如插件、别名、构建选项等。Vite 是一个构建工具, 用于开发和打包 Vue 项目。
位置:位于根目录,因为它是整个项目的构建工具配置,影响整个项目的构建和开发过程。
2.package.json
:
是Vue 项目模板中的核心配置文件,用于管理项目的依赖、脚本、版本信息 以及其他元数据。具体作用包括:
-
依赖管理:列出项目的所有依赖和开发依赖,确保项目可以在不同环境中一致地安装和运行。
-
脚本定义:定义可以通过
npm run
或yarn run
执行的脚本,例如启动开发服务器、构建项目或运行测试。 -
项目元数据:包含项目的名称、版本、作者等信息,这些信息有助于识别和管理项目。
-
配置设置:可能包括配置字段(如 Babel、ESLint)的设定,支持与工具和库的集成
3.src/components
文件夹在 Vue 项目中用于存放可重用的 Vue 组件。这些组件是构建应用界面的基本单位,通常包含模板、样式和逻辑。组件可以在不同的页面或其他组件中复用,从而提高代码的模块化和重用性,简化开发和维护过程。
4.src/router文件夹下文件
router/
:存放路由配置文件,通常包括index.js
或index.ts
等文件,用于定义应用的路由规则。App.vue
:根组件文件,通常包括<template>
,<script>
, 和<style>
部分。main.js
或main.ts
:项目的入口文件,通常在这里创建 Vue 实例并挂载到 DOM 中。
5.views文件夹作用:
views/
:存放视图组件,通常对应不同的路由页面。
6.node_modules文件夹作用
node_modules
文件夹中存放了通过 npm 或 yarn 安装的所有依赖包。项目中声明的所有依赖(包括 Vue 及其插件、库、工具等)都会被下载到这个文件夹中。依赖包的版本和内容都是从 package.json
文件中的 dependencies
和 devDependencies
字段中获取的。
. 项目的模块化
每个安装的包和模块都会在 node_modules
文件夹中以自己的子文件夹形式存在,这样可以确保项目中需要的每个包和模块都能独立管理,避免版本冲突和依赖问题。
. 缓存管理
node_modules
文件夹中的包和模块是由 npm 或 yarn 进行管理和更新的。它提供了一个本地缓存机制,使得依赖的安装、更新和卸载操作可以更高效。
. 支持本地开发
在开发过程中,node_modules
文件夹为项目提供了所需的所有工具和库。例如,Webpack、Babel、ESLint 等开发工具以及它们的插件和配置,都会被安装到这个文件夹中。
. 避免版本冲突
不同的项目可能需要不同版本的依赖包。node_modules
文件夹的存在使得每个项目都有自己独立的依赖环境,避免了全局依赖版本冲突的问题。
三.vue 文件结构
src/component文件下存放的都是组件文件
以下是vue.js组件的标准结构,尽量不要改变。
<template>
</template>
<script>
</script>
<style>
</style>
1.注意:template节点中的根节点只能有一个标签
<template>
<div></div>
</template>
//或者
<template>
<h1></h1>
</template>
//但是如果写成以下就会报错
<template>
<div>
<h1></h1>
</div>
</template>
2.vue3中script标签会有提示 写为<script setup>。
-
import { ref, onMounted } from 'vue'
: 从 Vue 中导入ref
和onMounted
函数。ref
用于创建响应式状态。onMounted
是一个生命周期钩子,在组件挂载到 DOM 上后执行。
const count = ref(0)
: 使用ref
创建一个响应式变量count
,初始值为0
。ref
是 Vue 中的一个响应式引用,用于跟踪和响应变量的变化-
function increment() { count.value++ }
: 定义了一个increment
函数,用于增加count
的值。当按钮被点击时,这个函数会被调用,从而更新count
。 onMounted
钩子函数会在组件挂载完成后执行。在这里,它用于在组件挂载时输出count
的初始值到控制台。<button @click="increment">Count is: {{ count }}</button>
: 这是组件的模板部分,定义了一个按钮。当按钮被点击时,会调用increment
函数。按钮上显示的内容是count
的当前值,{{ count }}
是 Vue 的插值语法,用于显示count
的值。
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
3.css样式表比较灵活,可以用scss,sass,less,stylus类型的样式表。注意:scoped一定要加入,否则组件样式就会影响到全局样式
<style lang="scss" scoped>
</style>
四:安装组件库
安装ElementUI组件库:Element 是一个基于 Vue.js 的组件库,提供了一套丰富的 UI 组件,旨在帮助开发者快速构建美观且一致的用户界面。它包括按钮、表单、对话框、通知等常用组件,并提供了多种主题和配置选项,以适应不同的应用需求。这个库特别适合用于构建后台管理系统
在命令行输入以下命令
npm install element-plus --save
在 npm
中,--save
标志用于将安装的包添加到项目的 package.json
文件中的 dependencies
部分。这样做的好处是,当其他人(或者你自己在其他机器上)运行 npm install
时,这些依赖会被自动安装。
不过,从 npm
版本 5.0.0 开始,--save
标志已成为默认行为。因此,安装依赖时无需显式指定 --save
,因为依赖会自动被添加到 package.json
文件中。如果你使用的是较新的 npm 版本,--save
标志可以省略。
注意:element-ui支持的是 vue2,element-plus支持的是 vue3
五.单文件组件:
在大多数启用了构建工具的 Vue 项目中,使用一种类似 HTML 的文件格式编写 Vue 组件,称为单文件组件(也称为文件,缩写为 SFC)。Vue SFC,顾名思义,将组件的逻辑 (JavaScript)、模板 (HTML) 和样式 (CSS) 封装在一个文件中。下面是前面的示例,以 SFC 格式编写:*.vue。(例如,vue项目模板中components文件夹下的HelloWorld.vue文件)
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
六.API样式
Vue 组件可以用两种不同的 API 样式编写:Options API 和 Composition API,分别对应vue2和vue3,在此主要使用Composition API
当使用Composition API编写时,代码中会有提示,例如
<script setup> </script>
如果是Options API则不会有setup
七.创建vue应用实例
每个vue应用程序都从1使用createApp函数创建一个新的应用程序实例开始
import {createApp} from 'vue'
const app = createApp ({
/*根组件*/
})
要传入的对象实际是一个组件,每个应用都需要一个"根组件",该组件可包含其他组件作为其子组件createApp
若使用的是单文件组件,通常会从另一个文件导入根组件
import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
挂载应用程序
<div id="app"></div>
app.mount('#app')