前端小白快速入门vue或者复习vue宝典（一）------项目构建和组件化开发

小杜coding

已于 2022-10-23 12:47:49 修改

阅读量161

点赞数

分类专栏：基础技术分享文章标签： vue.js 前端

于 2022-10-17 17:53:50 首次发布

本文链接：https://blog.csdn.net/Usjsnsn/article/details/127371103

版权

基础技术分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一. vue-cli构建项目与打包部署

使用vue-cli能够快速的帮助我们构建项目，它就如同一个脚手架，提供了可选的模板。在使用vue-cli之前需要先安装nodejs。

1.1 使用npm构建项目

npm install -g @vue/cli             #安装vue-cli,该步骤需要等一段时间
vue -V                              #查看vue-cli的版本
vue create my-app                   #创建名为my-app的项目

1.2 项目的结构介绍

public: 存放静态文件。
src: 源码文件，开发就在此目录下。
.gitignore: git的配置文件。
babel.config.js: babel的配置文件，在创建项目的时候才用的脚手架为bable。
package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。
package.json: 定义了该项目依赖的类库。

1.3 项目的打包部署

执行命令：

npm run build

将生成的dist目录下的文件放入到tomcat或者nginx下，启动服务器，即可访问。

二. 组件化开发

组件化开发是在ES6中提出的，可以提高页面的复用率，提高开发效率，便于团队协作，是一套模板化的代码，要有<template>、<script>、<style>三个标签，分别用来定义布局、脚本和样式。而且<template>下必须有一个根节点。

2.1 编写App.vue和HelloWorld.vue

HelloWorld.vue

<template> 
	<div>  <!-- template的根节点，是必须的 -->
		<h1 class="title">{{msg}}</h1>
	</div>
</template>
<script>
	export default {   <!-- 向外保留成员，表示向外暴露该组件 -->
		data() {
			return {
				msg: 'Hello World'
			}
		} 
	}
</script>
<style>
	.title{
		color: red;
	}
</style>

App.vue

<template>
    <div>
        <p>{{article}}</p>
        <Helloworld></Helloworld> <!-- 在Helloworld.vue中的组件 -->
    </div>
</template>
<script>
/**
 * 引入HelloWorld.vue组件，使用Helloworld变量来接收，接收变量的组件
 * 可以叫任何名字，但是推荐使用和导入组件保持一致。
 */
import Helloworld from './components/HelloWorld.vue'

export default {
	/**
     *  需要在当前组件中来定义引入的组件，接收的形式可以有二种：
     * 
     *  components: {HelloWorld} 最原始的写法为{Helloworld:Helloworld},第一个Helloworld
     *     在当前组件中使用的名字，可以随意更改，第二个Helloworld是上面import引入的时候用来接收的变
     *     量名。如果只写一个表示当前组件中使用的名字和变量名一致。 
     */
    components: {Helloworld},
    data(){   //组件化编程必须使用定义data方法(闭包的程序设计)
        return {
            article: '路透社20日援引伊朗法尔斯通讯社消息称'
        };
    }
}
</script>
<style>
</style>

2.2 定义入口JS文件

import Vue from 'vue'        //引入vue
import App from './App.vue'  //引入自己定义的App.vue,使用变量App来接收

new Vue({
    render: h => h(App),  //将App组件渲染到index.html中。
}).$mount("#app")

render是Vue中的一个方法，方法的定义形式如下：

// render最原始的，而传入的参数createElement又是一个函数，用来生成dom结构
render: function(createElement){
    
}
// 按照ES6的箭头函数的写法，进行第一次演变
render: createElement => createElement(模板)
// 将上面的createElement变为h，那么就得到最终的形式
render: h => h(App)