Vue_2 --- 脚手架环境搭建

0. 官方文档

https://cli.vuejs.org/zh/

1. 概述

CLI的含义

  1. C --- command
  2. L --- line
  3. I --- interface

2. 环境搭建

1. 全局安装 @vue/cli

配置 npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org

下载 vue/cli

npm install -g @vue/cli

2. 切换到你想要创建项目的目录,然后使用命令创建项目

cd 项目目录
vue create 项目名

3. 常用命令

1. 创建项目

vue create 项目名

2. 启动项目

npm run serve

3. 查看webpack配置

Vue 脚手架隐藏了所有webpack 相关的配置,如果想查看具体的webpack 配置,执行以下命令

vue inspect > output.js

4. 项目目录结构

1. main.js

整个项目的入口文件

// 引入Vue,这里引入的Vue是只有核心功能,没有模版解析器的运行版vue(vue.runtime.esm.js),所以不能配置template配置项
// vue.js的组成是核心功能(如生命周期等) + 模板解析器组成
import Vue from "vue"  // 如果是用的es6的模块化语法引入的vue 就是引入的vue.runtime.esm.js
// 引入App组件,它是所有组件的父组件
import App from "./App.vue";
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建Vue实例 --- vm
new Vue({
    el: "#app",
    // Vue会自动调用render(),
    render: h => h(App)
    // 上面是render()的简写代码,下面是render()函数的完整版
    render(createElement){
    	// return createElement("h1","你好")
    	return createElement(APP)
	}
})

2. App.vue

<template>
  <!-- 2. 使用组件 -->
  <div>
    <School/>
  </div>
</template>

<script>
// 1. 引入组件
import School from "./School.vue";

export default {
  name: "App",
  components: {School},
  data() {
    return {}
  }
}
</script>

<style>

</style>

3. src

1. assets

存放的项目的静态资源

2. components

存放项目中所有用到的组件

1. School 组件

<template>
  <div class="demo">
    <h1>学校名称: {{ name }}</h1>
    <h1>学校地址: {{ address }}</h1>
  </div>
</template>

<script>

export default {
  name: "School",
  data() {
    return {
      name: "实验中学",
      address: "北京",
    }
  }
}

// 对外暴露组件的方式三: 默认暴露
</script>

<style>
/* 组件的样式 */
.demo {

}
</style>

4. public

1. favicon.ico

网站的页签图标,必须是这个名字

2. index.html

整个应用的页面

<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8" />
		<!-- <meta http-equiv="Content-Type" content="text/html;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" />
         <!-- 配置网页页签的图标 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>
         <!-- app容器 -->
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

5. 自定义配置

0. 官方文档

https://cli.vuejs.org/zh/config/

1. 配置步骤

1. 在public 或 src 的同级目录下 新建 vue.config.js 文件

2. 参考官方文档配置

posted @ 2024-03-18 21:34  河图s  阅读(21)  评论(0)    收藏  举报