Vue 项目搭建以及写法
0 – 前言
本文将大致讲解一个Vue项目的创建过程,以及项目主要文件结构和对应用法,记录如何在Vue中引入app,在main.js中写些什么,如何创建多个组建并在app中注册,内容可能较为杂乱。
1 – 创建项目
首先,请确保你已经搭建了Vue的脚手架环境,在cmd输入vue有正确的提示信息。使用cmd的cd命令进入你的项目文件夹,输入vue create xxxx
来创建你的vue项目。
注意: 这里的xxxx是你的项目名。
2 – Vue项目结构
创建好后的项目大概长这个样子,这是Vue官方提供的HelloWorld项目。
这里的node_modules是Vue官方提供的所有的包,public下有一个ico图标和一个index.html,这个html绑定了我们的`#app`应用,代表了整个网站。在App.vue中注册了所有的组件,并由App统一管理。
组件全都放在src/components目录下。
2 – 1 package.json
package.json用于配置网站的全局信息,例如:name是网站的页签标题,就配置在这里,并且在index.html中不直接写入页签标签,相反,会读取该文件中的name作为<title></title>。
2 – 2 index.html
最开始的index.html文件中有如下内容:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<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>
这里的BASE_URL指的是public文件夹的相对路径。
2 – 3 main.js
import Vue from "vue";
import App from "./App.vue";
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
el: '#app',
render: createElement => createElement(App),
})
main.js 文件是index.html的script文件,也是整个网站的程序入口,在这里为网站主页面注册了最大的组件#App
。在main.js中有一串诡异的代码:
render: h => h(App)
这段代码其实是一个缩写,完整的写法其实长这样:
render: (createElement) => {
return createElement(App)
}
因为这里的参数只有一个,所以可以缩写成这样:
render: createElement => {
return createElement(App)
}
又因为,这里的返回值只有一个,所以又可以再次缩写:
render: createElement => createElement(App)
最后,再将createElement缩写成h,就得到了这段诡异的代码:
render: h => h(App)
用这个render的原因是这里没有引入完整的Vue,而是引入了Vue这个目录,顺便一提它在node_modules下。这样做的考虑是:引入了简化的Vue,也就是没有template所依赖的渲染库,那么就无法使用template: `???`来渲染模板。并且render是性能高于template的,同时功能也更加强大,便作为了main.js的主力渲染配置。
2 – 4 App.vue
<template>
<div>
<SchoolName></SchoolName>
</div>
</template>
<script>
// 引入School组件
import SchoolName from './components/SchoolName.vue'
export default {
name: 'App',
components: {SchoolName}
}
</script>
<style>
</style>
作为网站的根组件,App组件被程序入口所注册,直接作为<root>挂载在网站上,并在其中注册所有的子组件。例如,这里通过ES6标准引入了SchoolName作为其中一个孩子组件挂载在App上。
2 – 5 子组件
这里的SchoolName是一个挂载在App上的组件,我叫他子组件,他位于src/components目录下,这里存放网站所有的组件。
SchoolName.veu:
<template>
<div>
<h1>内阁最爱的歌: {{ name }}</h1>
<h2>地址: {{ address }} </h2>
</div>
</template>
<script>
export default {
name: 'SchoolName',
data() {
return {
name: '彩虹小白马',
address: '沈阳'
}
}
}
</script>
<style>
</style>
这里提一下,下面这段代码也是一个简写,虽然没有那么诡异。
export default { name: 'SchoolName', data() { return { name: '彩虹小白马', address: '沈阳' } } }
将Vue.extend({})也就是一个VueComponent直接暴露并导出。