Vue组件化开发(npm安装使用)

Vue组件化开发(npm安装使用)-ALOOGY WORLD (aloogychendl23.asia)

一、NPM使用

NPM简介

• NPM（Node Package Manager）是一个NodeJS包管理和分发工具。

• NPM以其优秀的依赖管理机制和庞大的用户群体，目前已经发展成为整个JS领域的依赖管理工具

• NPM最常见的用法就是用于安装和更新依赖。要使用NPM，首先要安装Node工具

NodeJS安装

• Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。

• Node中包含了NPM包管理工具，类似于java里面的maven

• 下载地址：Node.js 中文网 (nodejs.cn)

配置仓储和缓存目录

在安装目录下新建两个文件夹cache和global

执行：（后面换成自己的目录）

npm config set prefix "E:\nodejs\global"

npm config set cache "E:\nodejs\cache"

npm config set registry https://registry.npm.taobao.org

查看配置是否生效

执行：npm config ls

NPM使用

二、Vue Cli使用

• Vue CLI是Vue官方提供的构建工具，通常称为脚手架。

• 用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）及构建生产版本等功能的单页面应用。

• Vue CLI基于 webpack 构建，也可以通过项目内的配置文件进行配置。

1. 安装命令：npm install -g @vue/cli

1. 有警告可以忽略不计，不会影响我们安装和使用

   

1. 检查是否安装成功

输入vue -V或者vue –version

用脚手架创建项目

执行：vue craete hello2

选最后一项：Manually select features

创建成功一个基本的vue项目

运行项目:

npm run server

访问

分析项目架构

package.json

记录了项目的基本信息

 {
   "name": "hello2",
   "version": "0.1.0",
    "private": true， //项目是私有的
   "scripts": {
     "serve": "vue-cli-service serve",//项目的一些指令
     "build": "vue-cli-service build"//项目的一些指令
   },
   "dependencies": {
     "core-js": "^3.8.3",
     "vue": "^3.2.13"
   },
   "devDependencies": {//项目的依赖
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-service": "~5.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead",
     "not ie 11"
   ]
 }
 ​

main.js

程序的入口文件

三、组件化开发

组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件的构成

• Vue 中规定组件的后缀名是 .vue

• 每个 .vue 组件都由 3 部分构成，分别是:

1. template，组件的模板结构，可以包含HTML标签及其他的组件

2. script，组件的 JavaScript 代码

3. style，组件的样式

App.vue

 <template>
 //组件的标签和文本、组件的结构
   <img alt="Vue logo" src="./assets/logo.png">//img标签
   <HelloWorld msg="Welcome to Your Vue.js App"/>//自定义的组件
 </template>
 ​
 <script>
 //行为的代码
 import HelloWorld from './components/HelloWorld.vue'
 ​
 export default {
   name: 'App',
   components: {
     HelloWorld
   }
 }
 </script>
 ​
 <style>
  //组件的css样式
 #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>
 ​

自定义一个新的组件

App.vue

 <template>
 ​
   <img alt="Vue logo" src="./assets/logo.png">
   <Hello></Hello>
   <Hello></Hello>
 </template>
 ​
 <script>
 ​
 import Hello from './components/Hello.vue'
 ​
 export default {
   name: 'App',
   components: {
     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>
 ​

Hello.vue

 <template>
     <h1>hello</h1>
 </template>
 <script>
 ​
 ​
 </script>
 ​
 ​
 ​
 <style>
 ​
 </style>

运行结果

添加扩展