Vue2工程化介绍

合集 - Vue.js(3)

1.Vue2基础语法2024-05-072.Vue2进阶语法2024-05-07

3.Vue2工程化介绍2024-05-08

收起

本文目录

• 【一】环境搭建
• 【二】文件夹目录
• 【三】项目运行机制

Vue2项目[基于vue-cli]工程化

回到顶部

【一】环境搭建

• 06-Vue-cli - 刘清政 - 博客园 (cnblogs.com)

安装node

使用npm/cnpm

npm换源：npm config set registry https://registry.npmmirror.com

安装vue-cli

cnpm install -g @vue/cli

# 安装脚手架
cnpm install -g @vue/cli
# 切换目录，创建项目
cd '指定目录下'
vue create 项目名
# 选择配置
# 使用 【方向键】选择 回车键进入下一步
# 选择插件时，使用【空格键选中/取消】

回到顶部

【二】文件夹目录

|- vue-project 				# 项目文件名
	|- node_modules				# 项目环境
    |- public					# 存放公共资源
    	|- favicon.ico				# 网站的图标文件
        |- index.html				# 项目的入口 HTML 文件
    |- src						# 项目的源代码文件夹
    	|- assets					# 存放静态资源文件
        |- components				# 存放vue组件文件
        	|- HelloWorld.vue
        |- router					# 存放 Vue Router相关的配置文件
        	|- index.js					# 定义路由映射关系
        |- views					# 存放视图组件文件
        	|- HomeView.vue				# 默认首页内容
			|- AboutView.vue			# 默认关于页面内容
        |- App.vue					# 项目的根组件
        |- main.js					# 项目的入口
    |- package.json				# 项目配置文件  # npm install 时会根据这个
    |- package-lock.json		# 用来确保安装的依赖包与开发版本一致
    |- vue.config.js			# vue cli 项目的配置文件

回到顶部

【三】项目运行机制

【1】main.js

// 导入  与 from xxx import xxx 一样
import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
Vue.config.productionTip = false
 
// new 一个Vue实例
new Vue({
  router,  // router对象  // 相当于router:router对象
  render: h => h(App)  // 以App作为根组件创建虚拟dom
  `render: h => h(App) 定义根组件的渲染方法  # 接收createElement函数作为参数 创建虚拟dom
  等价于:
  render: function (createElement) {
            return createElement(App);}
  `
}).$mount('#app') // 将该实例挂载到【index.html】中【id=app】的标签上

【2】App.vue

• 【注意】在vue2中，template标签中的内容，只能有单个标签，也就是template下只能有一个子标签

<template>
    <!-- vue2，在template标签下，只能有一个标签 -->
	<div>
    	<p>其他代码</p>
    </div>
    <!-- 如果有其他标签，将会抛出异常 -->
    <div></div>
</template>

【3】router/index.js

• 在文件夹下的index.js，与python包的__init__类似，当导入时，会先执行index.js，如果写在index.js中的代码，可以导入到文件夹那层即可

【4】HomeView.vue（组件基本结构）

• 在vue2中，基本结构为

<template>
    <div>
    
    </div>
</template>
 
<script>
</script>
 
<style>
</style>