vue 框架学习（7）-创建项目

创建项目步骤

如果你已经安装了node.js,VsCode， 再进行操学习Vue知识之前先来创建个项目吧。

1. npm install -g vue-cli，然后等待安装（vue-cli可以帮助我们快速构建Vue项目）
2. npm install -g webpack命令，等待安装（打包js的工具）
3. 创建一个名为hellovue的项目吧，名字随意取，输入回车vue init webpack hellovue
4. 在vscode中打开在终端创建的项目。目录结构展示在左侧。

5.在package.json 中找到启动项目的命令。npm run dev

6.注意终端最末级为项目名：hellovue

7.查看：http://localhost:8083/#/

目录结构解析

vue项目结构启动原理

vue调用顺序: index.html → main.js → app.vue → index.js → components/组件

一般项目创建好后会有三个文件：index.html、main.js、app.vue

1、index.html ：所有vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染加载。
2、main.js：相当于java的入口函数，控制初次启动vue项目要加载的组件
3、el:’#app’这个和index.html中的app组件挂钩。官网解释为：模板将会替换挂载的元素。


4、App.vue默认为一个根组件

export 中的name属性组件名字
created：生命周期函数

HelloWorld项目

将示例页面修改为Hello word 页面。

我们打开项目入口文件App.vue，将它修改为

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

刷新页面：

我们肯定不能一直在app.vue文件上写页面啊，但是我们的index.html有什么用呢？，仔细分析，在网页的Title部分，加载了index.html中定义的Title，而在正文部分，加载了App.vue中定义的部分。

在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

如何让index.html的内容显示到首页呢，只需要将main.js中的模板注释掉就好了。

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

在看浏览器的控制台，就可以看到index.html的页面内容了。

index.html页面

其他文件说明：

-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

搞懂了项目框架，下面开始一起学习vue的语法吧。