工程化开发和脚手架

脚手架Vue CLI

npm 是 NodeJS 下的包管理器，vue-cli脚手架模板就是基于 node 下的 npm 来完成安装的。
webpack: 它的主要用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli：官方提供的一个脚手架，用于快速生成一个 vue 的项目模板

使用步骤

右键菜单打开终端管理员，进入后开始：
1.全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g

  1. 查看vue/cli版本： vue –version
  2. 创建项目架子：vue create project-name(项目名不能使用中文)
  3. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

安装过程

我安装的是npm，但是直接输入全局安装指令没成功，于是
先在下载Node的文件夹下面建了两个文件夹node_global和node_cache
然后cmd输入：
C:\Users\Administrator>npm config set prefix “D:\Pragram\node-v20.17.0.msi\node_global”
C:\Users\Administrator>npm config set cache “D:\Pragram\node-v20.17.0.msi\node_cache”
C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org
C:\Users\Administrator>npm config get registry
C:\Users\Administrator>npm config list
然后配置系统环境变量
然后npm install -g @vue/cli
但是报错
C:\Users\Administrator>npm install -g @vue/cli
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/@vue%2fcli failed, reason: certificate has expired

npm ERR! A complete log of this run can be found in:
npm ERR! D:\RunSoftware\nodejs\node_cache_logs\2024-09-04T13_04_05_644Z-debug-0.log
于是我换了一个源：npm config set registry https://registry.npmjs.org/
不行，继续换
npm config set registry https://mirrors.cloud.tencent.com/npm/
继续npm i @vue/cli -g
还是报错，但是这次起码很快而且有显示再跑，报错内容：
C:\Users\Administrator> npm i @vue/cli -g
npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! invalid json response body at https://mirrors.cloud.tencent.com/npm/electron-to-chromium reason: Invalid response body while trying to fetch https://mirrors.cloud.tencent.com/npm/electron-to-chromium: read ECONNRESET

npm ERR! A complete log of this run can be found in:
npm ERR! D:\RunSoftware\nodejs\node_cache_logs\2024-09-05T03_48_41_073Z-debug-0.log
有时候，清除 npm 缓存可以解决问题
npm cache clean –force
我重新安装了新版的node.js
更新完 Node.js 后，运行以下命令以安装最新的 npm：
npm install -g npm
然后npm install -g @vue/cli
终于成功了！！！！
然后 npm i @vue/cli -g
成功后vue –version
开始我没有成功输出版本号，因为我的环境变量有问题
npm root -g
把这个输出的值加到环境变量里面去，如果这个输出失败那就是node.js的文件夹路径没有正确放到环境变量里，加进去就好

创建项目启动项目过程

在终端输入 vue create xiangmuming
其中xiangmuming输入什么那么这个项目文件就会命名什么，不能是中文命名
注意在哪里的终端创建，项目就会被创建在哪里
也可以管理员运行vscode，然后在这里的文件夹下面右键终端运行输入命令创建
然后在选项中选择vue2(此时在学)
然后会生成一个你命名的文件夹，里面有很多文件目录，给你搭好了架子
但是！我又出问题了，显示vue : 无法加载文件 D:\Pragram\node-v20.17.0.msi\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/
?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

  • vue create domo1
  •   + CategoryInfo          : SecurityError: (:) []，PSSecurityException
  + FullyQualifiedErrorId : UnauthorizedAccess
解决办法：管理员运行终端然后输入
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Get-ExecutionPolicy -List
npx vue create demo1
成功进入选择界面~
选择后
Vue CLI v5.0.8
✨  Creating project in D:\Pragram code\webFront\web-front-end\vue\03vuecli\demo1.
⚙️  Installing CLI plugins. This might take a while...
等一会儿会建好
启动项目：
先进入你创建的文件夹目录，然后再输入
npm run serve
成功后会显示
 DONE  Compiled successfully in 3407ms                                                                                                        15:48:28


App running at:
- Local:   http://localhost:8080/ 
- Network: http://10.20.54.212:8080/

进入local网址成功显示就证明项目运行成功
注意，npm run serve的serve是根据package.json里面的 “scripts”: {
“serve”: “vue-cli-service serve”,}
其中的serve决定的，如果别的项目这里不是serve，就改成对应的东西

项目目录介绍

脚手架中的文件有很多，三个重要文件：

  1. main.js 入口文件
  2. App.vue App根组件
  3. index.html 模板文件

组件化开发

写在前面

在一个建立好的demo文件中，要展现多个前面页面或者例子，不要没换一个就新建一个demo，直接把原有的src文件夹复制一个重命名，然后删了之前的src文件夹新建一个src文件夹，在src文件夹里面写新的页面或者新的例子。可以有多个src的复制保存版，但是叫src的必须只有一个，也只会运行叫src的文件夹里的东西
src文件夹包含components文件夹,App.vue文件，main.js文件
快速生成三个部分快捷键：<vue 选择第一个点击会自动生成框架
vue2只能有一个根组件（只能有一个最大的盒子，不能有两个一样大的盒子并列放），vue3可以
组件名遵循大驼峰命名法

组件化和根组件

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的样式、结构、行为
好处：便于维护，利于复用，提升开发效率
根组件：整个应用最上层的组件，包裹所有普通小组件（可以理解成最外边最大的盒子）

App.vue单文件组件的组成

分为三个部分：结构，行为，样式（不一定三个都有，也可以只有一个）
template：结构 （有且只能一个根元素）
script: js逻辑
style： 样式 (可支持less，需要装包)
让组件支持less
（1） style标签，lang=”less” 开启less功能
（2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

普通组件的局部注册

理解：把一个页面分成多个部分（多个小盒子），把这个页面的每一个部分单独建一个.vue文件都放到components文件夹里，每一部分对应的.vue文件里面写这个文件的三个部分（结构，行为，样式）。在components文件夹同级的App.vue文件中导入并注册每个部分的.vue文件，直接使用引用文件的变量名即可把每一部分的内容放到页面里面（把小盒子导入到大盒子里面）
当成html标签使用即可 <组件名></组件名>
局部注册特点：只能在注册的组件内使用
示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
App.vue文件
<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>

    <!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode
         设置中搜索 trigger on tab → 勾上
    -->
  </div>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  components: {
    // '组件名': 组件对象
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

普通组件的全局注册

如果局部注册是在一个大盒子里放多个小盒子，那么全局注册就是有一个东西所有的小盒子都想用（比如按钮），那么要在main.js中进行全局注册
全局注册特点：所有组件内都能使用
进行全局注册 → 在所有的组件范围内都能直接使用
Vue.component(组件名，组件对象)
注意一次只能导入一个，没有s
导入文件代码要写在顶部，这是规范
在导入的文件最后加不加.vue都可以，有时候自动补全.vue有时候没有都没关系
代码例子 main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
import Vue from 'vue'
import App from './App.vue'
// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton'
Vue.config.productionTip = false

// 进行全局注册 → 在所有的组件范围内都能直接使用
// Vue.component(组件名，组件对象)
Vue.component('HmButton', HmButton)


// Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

组件进阶

scoped解决组件的样式冲突

理解：在样式style中，默认是全局样式，就是一个局部样式的style也会影响所有组件，一个局部组件设置的div样式会影响到其他组件里面的div，一般是不希望这样的，所以有了scoped这个设置，让局部样式只能作于与它对应的局部组件
使用方法：在局部组件的.vue文件中的style标签后面加scoped，变成