Vue2学习day04——脚手架搭建&分析脚手架&修改默认配置&ref属性&配置项props&mixin(混入)&插件&scoped样式

Happy_change

已于 2022-03-13 18:14:58 修改

阅读量2.2k

点赞数

分类专栏： Vue学习记录文章标签：学习 vue.js vscode

于 2022-03-13 18:12:32 首次发布

本文链接：https://blog.csdn.net/Happy_change/article/details/123408099

版权

本文详述了使用Vue CLI搭建Vue2项目的过程，包括脚手架安装、项目结构分析、修改默认配置、理解ref属性、配置项props、mixin（混入）的使用，以及如何添加插件和使用scoped样式。同时，文章提到了在使用less-loader时要注意与webpack版本的兼容问题。

摘要由CSDN通过智能技术生成

文章目录

Vue2学习day04

Vue2学习day04

现在我们开始使用@vue/cli脚手架来搭建项目。Vue CLI官方文档

脚手架搭建

想要使用Vue CLI首先要安装包在cmd中运行如下命令

npm install -g @vue/cli

我这里安装的版本是4.5.11，想要指定版本安装也很简单，只需在后面添加@版本号即可
安装成功之后，我们进入想要创建项目的文件夹，执行命令

vue create hello-world

此为Vue2学习笔记，自己装的是vue2，选着如下选项，babel可以将ES6转为ES5，eslint进行语法检查
在这里插入图片描述
项目创建完成后，我们使用VSCode打开

分析脚手架

脚手架结构：

	├── 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：包版本控制文件

下面我们将上篇博客最后的单文件组件的案例整合到项目中，逻辑都是一样的，不再做具体说明
首先将components目录下的HelloWorld组件删除，我们用不到，而后在其下构建School组件和Student组件直接复制上述案例中的代码即可，建议命名Student.vue，School.vue
之后修改src目录下App.vue中的代码同样直接复制我们上篇博客最后单文件组件的案例中的即可
index.html和main.js中的代码我们直接用脚手架给我们创建的HelloWorld案例中的即可，不需修改，因和我们上个案例中书写的不大一致，下面将对这两个部分的代码进行分析
index.html中的代码分析，其在public目录下

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

/*
  该文件是整个项目的入口文件
*/
// 引入Vue 是一个不能解析template配置项的vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false

/*
  关于不同版本的Vue:
    vue.js与vue.runtime.js的区别：
      vue.js是完整版的Vue，包含：核心功能+模板解析器
      vue.runtime.xxx.js是运行版的Vue,只包含：核心功能：没有模板解析器
  因为Vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容    
*/
// 创建Vue的生产提示
new Vue({
   
  el:'#app',
  // 完成了这个功能：将App组件放入容器中
  // render是一个函数,Vue调用，传递了createElement函数，创建具体的函数，编写具体的内容
  /*render(createElement){
    return createElement('h1','你好啊')
  }*/
  // render函数可以简写，因未用到this故可以简写为箭头函数
  /*render:(createElement)=>{
    return createElement('h1','你好啊')
  }*/
  // 传递的参数只有一个因此括号可以去掉，箭头函数只有一句函数体，并且还要return可简写为
  //render:createElement=>createElement('h1','你好啊')
  // 继续简写将createElement使用一个简单参数名替代
  // render: h => h('h1''你好啊')
  render: h => h(App