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

客官°小女子只卖身不卖艺 2022-10-28 04:56 210阅读 0赞

## 创建项目步骤 ##

如果你已经安装了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中打开在终端创建的项目。目录结构展示在左侧。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
5.在package.json 中找到启动项目的命令。`npm run dev`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]  
6.注意终端最末级为项目名：`hellovue`  
![在这里插入图片描述][20210205161730923.png]

![在这里插入图片描述][20210205161850670.png]  
7.查看：`http://localhost:8083/#/`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]

## 目录结构解析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]

## 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组件挂钩。官网解释为：`模板将会替换挂载的元素`。  
![在这里插入图片描述][2021020516285461.png]  
![在这里插入图片描述][20210205162900624.png]  
4、App.vue默认为一个根组件

export 中的name属性组件名字  
created：生命周期函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 5]

## 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>

刷新页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 6]  
我们肯定不能一直在`app.vue`文件上写页面啊，但是我们的`index.html`有什么用呢？，仔细分析，在网页的Title部分，加载了`index.html`中定义的Title，而在正文部分，加载了`App.vue`中定义的部分。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 7]  
在项目运行中，`main.js`作为项目的`入口文件`，运行中，`找到其实例需要挂载的位置`，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的`模板中的内容所取代`，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 8]  
如何让index.html的内容显示到首页呢，只需要将main.js中的模板注释掉就好了。

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

在看浏览器的控制台，就可以看到`index.html`的页面内容了。  
![在这里插入图片描述][20210205164609645.png]  
`index.html`页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 9]

## 其他文件说明： ##

-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的语法吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221024/4b7f6ee2a6f2452c8df6c67efb5ede00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/e01299e13c65405497d929c37afdedc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/1b8fb01371d044209e967cb584043664.png
[20210205161730923.png]: /images/20221024/b5deb79649ec46a9975a0a35ae45a9bf.png
[20210205161850670.png]: /images/20221024/191865e9bea44ddf83c7c2d1c180d763.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/deaf951765aa4432ac22ea516c8218d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/0bd1824608944e5c81e9f64a3587f6cc.png
[2021020516285461.png]: /images/20221024/1a771516a49b435484ea639900343a2e.png
[20210205162900624.png]: /images/20221024/5bd5ca389eb54b9cbc3f3783014afb77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/ffa0d609ecdf465a8ff957db76121421.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/1e5da1df9c8145838fba834ae1c91724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/c03208368d2344f1914cdbada8e3402d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/93b4ded4e7994a0293197bd16ebcd80e.png
[20210205164609645.png]: /images/20221024/70ab449efa084379b1f4db5a02869da3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/1c04e7fdbb9e4ceea212407cbf7b2633.png