vue framework learning (7)-create a project

Create project steps

If you have installed node.js and VsCode, let's create a project before proceeding to learn Vue knowledge.

1. npm install -g vue-cli, And then wait for installation (vue-cli can help us quickly build Vue projects)
2. npm install -g webpackCommand, waiting for installation (tools for packaging js)
3. Create a project called hellovue, take any name, and enter entervue init webpack hellovue
4. Open the project created in the terminal in vscode. The directory structure is shown on the left.

5. Find the command to start the project in package.json. npm run dev

6. Note that the last level of the terminal is the project name:hellovue

7. View:http://localhost:8083/#/

Directory structure analysis

Vue project structure startup principle

Vue calling sequence : index.html → main.js → app.vue → index.js → components/components

Generally, there will be three files after the project is created: index.html, main.js, app.vue

1. index.html: All vue files are developed in a single page format, and all vue components are rendered and loaded through index.html.
2. main.js: equivalent to the entry function of java, which controls the components to be loaded when the vue project is started for the first time.
3. el:'#app' is hooked to the app component in index.html. Official website interpreted 模板将会替换挂载的元素as: .


4. App.vue is a root component by default

The name attribute component name in export
created: life cycle function

HelloWorld project

Modify the sample page to a Hello word page.

We open the project entry file App.vue and modify it to

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello World！'
    }
  }
}
</script>

Refresh the page:

We certainly can't keep app.vuewriting pages on the file, but index.htmlwhat's the use of ours ? , Carefully analyze, in the Title part of the web page, the Title index.htmldefined in is loaded , and in the body part, App.vuethe part defined in is loaded .

When the project is running, main.jsas the project 入口文件, running, 找到其实例需要挂载的位置that is, index.html, at the beginning, the content at the mount point of index.html will be displayed, but then it will be included in the component in the instance 模板中的内容所取代, so we will Seeing that the content of the body in index.html will be displayed for a moment.

How to display the content of index.html on the homepage? Just comment out the template in main.js.

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App }
  // template: '<App/>'
})

You can see index.htmlthe content of the page by looking at the browser console .

index.htmlpage

Description of other documents:

-build

-build.js 生产环境构建脚本

-utils.js 构建相关工具方法

-webpack.base.conf.js webpack基础配置

-webpack.dev.conf.js webpack开发环境配置

-webpack.prod.conf.js 生产环境配置

-confg 项目配置

--dev.env.js 开发环境变量

--index.js 项目配置文件

--prod.env.js 生产环境变量

--test.env.js 测试环境变量

-package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

-src 源码目录

--main.js 入口js文件

--app.vue 根组件

--components 公共组件目录

--title.vue

Understand the project framework, let's start to learn the syntax of vue together.