一、【VUE-CLI】Vue CLI 脚手架介绍及安装

Vue CLI 脚手架介绍及安装

纯纯的小白

3241人浏览 · 2022-08-03 19:19:45

纯纯的小白 · 2022-08-03 19:19:45 发布

一、Vue CLI 脚手架介绍及安装

1、初始化脚手架

1、说明

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
官网

2、具体步骤

（仅第一次执行）全局安装@vue/cli
1. ```
npm install -g @vue/cli
```
切换到要创建项目的目录，使用命令创建项目（xxx为项目名）
1. ```
vue create xxx
```
启动项目
1. ```
npm run serve
```

备注：
如果出现下载缓慢，配置npm淘宝镜像（最好在进行第一步之前就跑这个命令）
npm config set registry https://registry.npm.taobao.org
Vue脚手架隐藏了所有webpack相关配置，如果想查看webpack配置，可执行此命令
vue inspect > output.js

3、运行效果图

在这里插入图片描述

2、脚手架文件结构

在这里插入图片描述

3、主要文件分析

1、main.js

/*
  该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建Vue实例对象---vm
new Vue({
  // 将App组件放入容器中（可点代码块下方链接进入详解，此处不过多赘述）
  render: h => h(App),
}).$mount('#app') // el: '#app'

看"render: h => h(App)"说明的点这里~

2、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- （没啥用，IE不配！）针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口，巴拉巴拉一大堆... -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标（规避路径问题，使用<%= BASE_URL %>指向public文件夹）-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题（插件到package.json文件获取name）-->
    <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>

4、.vue文件替换成上一节的内容

1、App.vue修改

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <School/>
    <Student/>
  </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'

export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
</script>

2、components/School.vue

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
export default {
	name:'School',
	data(){
		return {
			name: '沈工大',
			address: '沈阳'
		}
	},
	methods: {
		showName(){
			alert(this.name)
		}
	},
}
</script>

<style>
.demo{
	background-color: orange;
}
</style>

3、components/Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
export default {
	name:'Student',
	data(){
		return {
			name: 'Mr.Wang',
			age: 18
		}
	}
}
</script>

5、启动项目并打开页面

由于日常开发使用 npm run dev 命令启动习惯了，故个人在package.json追加一条指令

“dev”: “vue-cli-service serve”

这样我就依然可以快乐的使用 npm run dev 启动了~

在这里插入图片描述

6、Result

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^