Vue2 项目搭建方法

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

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直接暴露并导出。

作者:Sy_
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇