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

1、初始化脚手架

1、说明

  1. Vue脚手架是Vue官方提供的标准化开发工具(开发平台)
  2. 官网

2、具体步骤

  1. (仅第一次执行)全局安装@vue/cli

    1. npm install -g @vue/cli
      
  2. 切换到要创建项目的目录,使用命令创建项目(xxx为项目名)

    1. vue create xxx
      
  3. 启动项目

    1. npm run serve
      

备注:

  1. 如果出现下载缓慢,配置npm淘宝镜像(最好在进行第一步之前就跑这个命令)

    1. npm config set registry https://registry.npm.taobao.org
      
  2. Vue脚手架隐藏了所有webpack相关配置,如果想查看webpack配置,可执行此命令

    1. 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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐