NPM使用
NPM简介
NPM(Node Package Manager)是一个NodeJS包管理和分发工具。NPM以其优秀的依赖管理机制和庞大的用户群体,目前已经发展成为整个JS领域的依赖管理工具。NPM最常见的用法就是用于安装和更新依赖。要使用NPM,首先要安装Node工具。
NodeJS安装
Node.js是一个基于Chrome v8引擎的JavaScript运行时环境。Node中包含了NPM包管理工具。
下载地址:https://nodejs.org/zh-cn/
NPM使用
Vue CLI使用
开发vue项目时,不再以html的形式直接写代码,以工程化的形式开发。
- Vue CLI是Vue官方提供的构建工具,通常成为脚手架。
- 用于快速搭建一个带有热重载(在代码修改后不必刷新页面即可呈现 修改后的效果)及构件生产版本等功能的单页面应用。
- Vue CLI基于webpack构建,也可以通过项目内的配置文件进行配置。
- 安装:npm install -g @vue/cli
项目创建
- 切换到项目创建目录cmd,执行命令:vue create 项目名称
- 选择最新版Vue3
- 选择package.json,相关依赖记录到package.json
- 项目正在创建
- 项目创建完成
- 项目启动
npm run serve
组件化开发
模块化开发
main.js
main.js 程序的入口文件,在里面创建vue的vm对象。
通过import方式导入各种模块,完成前端代码的组织。
import {
createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
组件化开发
组件化开发介绍
App.vue是vue提供的一个根组件,vue倾向于使用组件的形式进行开发,把网页的各个部分抽象为一个个组件,组件可以进行重用,组件和组件里面还可以做嵌套。
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。比如导航栏可以封装成为组件,在多个网页进行使用。
Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。
组件的构成
Vue中规定组件的后缀名是.vue
每个.vue组件都由3部分构成,分别是:
template,组件的模板结构,可以包含HTML标签及其他的组件
script,组件的JavaScript代码
style,组件的样式
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<Hello></Hello>
</template>
<script>
//导入模块
// import HelloWorld from './components/HelloWorld.vue'
import Hello from './components/Hello.vue'
export default {
name: 'App',
//注册组件
components: {
// HelloWorld
Hello
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>