谷粒商城36 - 前端基础 VUE-Vue脚手架模块化开发

布满荆棘的人生 2023-03-04 08:14 51阅读 0赞

### 文章目录 ###

*   *  vue 模块化开发
     *   *  cmd窗口中初始化脚手架项目
         *  脚手架生成的代码解读
         *  脚手架项目访问自己编写的组件
         *  Vue Router

## vue 模块化开发 ##

### cmd窗口中初始化脚手架项目 ###

1.  `npm install webpack -g`  
    全局安装webpack  
    在cmd中输入 `npm install webpack -g` 即可安装![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
    注意要把快速编辑模式去除, 以免安装的时候卡顿  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]
2.  `npm install -g @vue/cli-init`  
    在cmd中 , 输入`npm install -g @vue/cli-init`  
    安装全局的vue脚手架
3.  新建一个文件夹,用于vue脚手架工程的安装  
    例如在如下的目录中 , 进行demo项目的安装  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]  
    在此目录下, cmd窗口中, 执行如下的命令, 会报错  
    `vue init webpack vue-demo`  
    提示找不到 vue 的提示符.  
    解决办法: 需要执行如下的命令, 进行vue全局安装  
    `npm install --global vue-cli`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
    cmd中再次执行如下的命令,  
    `vue init webpack vue-demo`  
    可以正常下载项目了  
    ![20200802160954421.png][]  
    初始化项目时的选项如下  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]提示finished代表环境搭建成功. 并且有提示如何启动环境  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]也可以看到文件夹中生成的代码  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]  
    在cmd中执行  
    cd vue-demo  
    run npm dev  
    即可运行代码  
    提示如下,

![20200802161610554.png][]  
浏览器访问http://127.0.0.1:8080/\#/  
可以看到如下的页面  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]

### 脚手架生成的代码解读 ###

vscode打开项目所在的文件夹.  
使用终端运行项目  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8][]  
初始访问的页面为index.html. 此页面只设定了一个div id为app  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9][]  
对index.html的脚本为main.js. 定义了一个vue对象, el指定了index.html的id为app  
指定了路由和组件以及模板  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]  
其中路由的js如下, 引入了HelloWorld组件 和访问路径  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11][]  
HelloWorld的组件的内容大致如下, 为一个标准的 vue文件. 主要是template script style 三段.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12][]

### 脚手架项目访问自己编写的组件 ###

需求:  
在浏览器中输入  
http://localhost:8080/\#/hello  
可以访问编写的模板页面  
首先在组件的文件夹下, 创建一个自己的vue模板文件, 起名为Hello.vue  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 13][]  
代码内容如下

<template>
    <div>
        <h1> 你好 , hello  ,{
       {name}}  </h1>
    </div>
     
    </template>
    
    <script> export default { data() { return { name: "周杰伦" } }, } </script>
    
    
    <style > </style>

在路由文件夹的index.js中, 进行路径的路由配置  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 14][]

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Hello from '@/components/Hello'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        { 
          path: '/hello',
          name: 'Hello',
          component: Hello
        }
      ]
    })

在浏览器中输入 http://localhost:8080/\#/hello  
可以看到显示如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 15][]  
之所以还会有图片, 是因为在App.vue文件中, 定义了图片和路由视图,. 切换url , 只会改变路由视图, 而上面的图片是一直还在的.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 16][]

### Vue Router ###

需求:  
点击链接, 直接跳转到/hello和首页.  
在vue中不是使用a标签进行链接的跳转, 而是使用 vue router  
官方文档如下  
https://router.vuejs.org/zh/guide/\#html  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 17][]

<router-link to="/foo">Go to Foo</router-link>

在App.vue中 修改如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 18][]  
完整代码

<template>
      <div id="app">
        <img src="./assets/logo.png"> <br>
    
            <router-link to="/hello">去见周杰伦</router-link><br>
                <router-link to="/">返回首页</router-link>
    
        
        <router-view/>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'App'
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

显示效果如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 19][]  
点击去见周杰伦, 会跳转到 hello的路径  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 20][]  
点击返回首页, 会跳转到返回首页 路径  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 21][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/c637d20246e64419aa268bcae6012b46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20230208/4d896e2640ee4adcbfed677548a5682d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20230208/b210f5e76d014afbba2bb8e3089a2ba0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20230208/37348bd1b7a247c6b62e3d21dfb28dff.png
[20200802160954421.png]: /images/20230208/58a46566feff4d5c87488822262ef27e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20230208/037e59f0e498452db842a3e74b8a7ba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20230208/de9a12c56c0043aa937e2d1ca13ab78b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20230208/2fcb689905a04d7f93f37516b211942b.png
[20200802161610554.png]: /images/20230208/0bd8ebd911b641d6aa990b94cf4c0e76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20230208/3df12e15dd5f4c17bf9f904949de04e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20230208/13c18e0c4936411c9bd6d1833d293f9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20230208/e2c9eafcd0af45c4a37631b53b86dc73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20230208/ffb359b967bb4698be7a2e488a02b193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11]: /images/20230208/5d2421e7288b421fa64e5dee7359d6bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12]: /images/20230208/c150eade0b884948a5b09985e422f8cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 13]: /images/20230208/6a25ae67fc954283afd7602382d78675.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 14]: /images/20230208/385f92075c0e4c19917a93a16368aa94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 15]: /images/20230208/4f25b88591544ed282663b45db290d12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 16]: /images/20230208/26665c5fd11c4c179bdfda926efc969a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 17]: /images/20230208/3d706cf286564f989c81228f48adce2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 18]: /images/20230208/516a5e026e9e4457a91c76dcc3eb7d7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 19]: /images/20230208/c90036b4002848b8b44749c20031aa20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 20]: /images/20230208/26cfacff72fc49bc8097d2373385b56a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 21]: /images/20230208/b1182c36c1d24956893bc928eb988642.png