脚手架使用vue （学习笔记）含代码

最新推荐文章于 2025-04-11 19:52:21 发布

月亮困了r

最新推荐文章于 2025-04-11 19:52:21 发布

阅读量174

点赞数

分类专栏： Vue Cli 学习笔记文章标签： vue.js 学习笔记前端学习方法

本文链接：https://blog.youkuaiyun.com/m0_55877024/article/details/130540357

版权

Vue Cli 学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue脚手架VueCLI的使用，包括项目结构、安装、创建项目、运行项目的过程，以及Vue版本的选择、配置文件vue.config.js的用途、props的配置和混入(mixin)、插件功能等核心概念。此外，还提到了Vue.js的完整版和运行时版的区别以及scoped样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

脚手架使用vue （学习笔记）含代码

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
├── vue.config.js：脚手架配置文件（可选）

Vue CLI

Vue.js 开发的标准工具

安装

注意：vue.js 与 vue-cli 是两个独立的东西，所以他们的版本也是独立的，一般来说高版本的 vue-cli 可以兼容低版本的
vue.js，而不建议将高版本的 vue.js 与低版本的 vue-cli 搭配，所以通常情况下，我们选择安装默认的最高版本的 vue-cli 即可。

关于旧版本：
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)
，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求：
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node
版本。

安装：
npm install -g @vue/cli 或 yarn global add @vue/cli
查看版本：
vue -version
升级：
npm update -g @vue/cli 或 yarn global upgrade --latest @vue/cli

创建项目

创建新项目命令：vue create 项目名

提示：项目名请不要与目前已有的 npm 公共依赖名冲突！

选择一个 vue.js 的版本：我们目前选择 Vue 2

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) 
> Default ([Vue 2] babel, eslint) 
  Manually select features

当看到一下提示时，说明 vue-cli 项目创建成功！

added 85 packages in 29s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project 项目名.
👉  Get started with the following commands:

 $ cd 项目名
 $ npm run serve

运行项目

我们进入到项目根目录，执行 npm run serve 就会编译项目并启动 vue-cli 提供的一个本地服务器
（每次创建 Vue-cli 项目都会自动提供一个 Hello World 案例）

> 项目名@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 11278ms                                               


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

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080/：这个为服务器为我们项目运行提供的本地范围访问的地址及端口。
http://192.168.2.102:8080/：这个为服务器为我们项目运行提供的局域网范围访问的地址及端口

关于不同版本的Vue

vue.js 与 vue.runtime.xxx.js 的区别：
1. vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能；没有模板解析器。
因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 这个配置项，需要使用 render 函数接收到的 createElement
函数去指定具体内容。

vue.config.js配置文件

使用 vue inspect > output.js 可以查看到 Vue 脚手架的默认配置。
使用 vue.config.js 可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

ref属性

被用来给元素或子组件注册引用信息（id 的替代者）
应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

props配置项


<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <!-- 这里 myAge 一定得是数值类型，否则 + 1 处理就会出错 -->
    <h2>学生年龄：{{ myAge + 1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data() {
    return {
      msg: '我是一个尚硅谷的学生',
      // props 是只读的，Vue 底层会监测你对 props 的修改，如果进行了修改，就会报错！！！
      // 若业务需求确实需要修改，那么请复制 props 的内容到 data 中一份，然后去修改 data 中的数据（props 中的数据会去到 vc 上）
      // data 中得数据不要与 props 中得数据重名（因为 vue 优先使用 props）
      myAge: this.age
    }
  },
  methods: {
    updateAge() {
      // 修改 data 而不是修改 props
      this.myAge++;
    }
  },

  // 简单声明接收
  // props:['name', 'age', 'sex']

  // 接收的同时对数据进行类型限制
  // 类型不对时还是会接收，但是会在控制台报错！（所以对于有类型限制的，要用 : 绑定）
  /*
  props:{
    name: String,
    age: Number,
    sex: String
  }
  */

  // 接收的同时对数据进行：类型限制 + 默认值的指定 + 必要性的限制
  // 类型不对时还是会接收，但是会在控制台报错！（所以对于有类型限制的，要用 : 绑定）
  props: {
    name: {
      type: String,   // name 的类型是字符串
      required: true  // name 是必要的
    },
    age: {
      type: Number,
      default: 99     // 默认值（注意：有默认值，就不要指定必要性了，否则就自相矛盾了）
    },
    sex: {
      type: String,
      required: true
    }
  }
}
</script>

<!--
特别注意：
props 所接收到的值并不是源数据的副本，而是源数据的引用值，即：源数据变化的同时 props 数据也会变化
所以，其实我们修改 props 中的数据，源数据也是在同步变化的，只不过 Vue 禁止了这种做法（会报错且没效果）！！！
但是，注意啦！有一种情况比较特殊！！！！
当数据是对象或数组的形式时，比如：
test: [
  {name: 'zjr', age: 18},
  {name: 'yp', age: 18}
]
--------------------------------
props:['test']
那么在 props 中直接修改整个对象是不可以的！比如：this.test[0] = {name: 'lxy', age: 17}，这样会报错！
但是，修改其中的一项值却是可以的！比如：this.test[0].age = 22，这样不会报错！并且修改的同时源数据也会同步改变！
不过，还是不建议以任何方式修改 props 的值！！！
-->

mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：

第一步定义混合：
```
{
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
优先级

当组件生命周期与混入生命周期冲突时，都会执行

当组件数据、方法与混入数据、方法冲突时，优先使用组件的，虽然都执行，但是混入的执行在前，组件的执行在后

插件

功能：用于增强 Vue
本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。

定义插件（推荐新建一个plugin.js文件）：
js
`
// 创建插件
export default {
// install() 函数
install(Vue, x, y, z) {
console.log(x, y, z);
// 全局过滤器
Vue.filter(‘mySlice’, function (value) {
return value.slice(0, 4)
});

 // 定义全局指令
 Vue.directive('fbind', {
     // 指令与元素成功绑定时（一上来）
     bind(element, binding) {
         element.value = binding.value;
     },
     // 指令所在元素被插入页面时
     inserted(element, binding) {
         element.focus();
     },
     // 指令所在的模板被重新解析时
     update(element, binding) {
         element.value = binding.value;
     }
 })

 // 定义混入
 Vue.mixin({
     data() {
         return {
             x: 100,
             y: 200
         }
     },
 })

 // 给 Vue 原型上添加一个方法（vm 和 vc 就都能用了）
 Vue.prototype.hello = () => {
     alert('你好啊');
 }

使用插件：Vue.use()

scoped样式

作用：让样式在局部生效，防止冲突。
在 APP 组件中，一般不需要加 scoped，因为一般 APP 中的样式都是全局的，其它组件一般也应该接受
当 APP 组件样式与其它组件样式冲突时，其它组件样式优先级更高！
写法：<style scoped>
4.安装less npm install less-loader@7 （有的版本不支持，建议直接指定）