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

文章目录

vue 模块化开发

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

vue 模块化开发

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

npm install webpack -g
全局安装webpack
在cmd中输入 npm install webpack -g 即可安装
注意要把快速编辑模式去除, 以免安装的时候卡顿
npm install -g @vue/cli-init
在cmd中 , 输入npm install -g @vue/cli-init
安装全局的vue脚手架
新建一个文件夹,用于vue脚手架工程的安装
例如在如下的目录中 , 进行demo项目的安装

在此目录下, cmd窗口中, 执行如下的命令, 会报错
vue init webpack vue-demo
提示找不到 vue 的提示符.
解决办法: 需要执行如下的命令, 进行vue全局安装
npm install --global vue-cli

cmd中再次执行如下的命令,
vue init webpack vue-demo
可以正常下载项目了

初始化项目时的选项如下
提示finished代表环境搭建成功. 并且有提示如何启动环境
也可以看到文件夹中生成的代码

在cmd中执行
cd vue-demo
run npm dev
即可运行代码
提示如下,

浏览器访问http://127.0.0.1:8080/#/
可以看到如下的页面

脚手架生成的代码解读

vscode打开项目所在的文件夹.
使用终端运行项目

初始访问的页面为index.html. 此页面只设定了一个div id为app

对index.html的脚本为main.js. 定义了一个vue对象, el指定了index.html的id为app
指定了路由和组件以及模板

其中路由的js如下, 引入了HelloWorld组件和访问路径

HelloWorld的组件的内容大致如下, 为一个标准的 vue文件. 主要是template script style 三段.

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

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

代码内容如下

<template>
<div>
    <h1> 你好 , hello  ,{{name}}  </h1>
</div>
 
</template>

<script>
export default {
    data() {
        return {
            name: "周杰伦"
        }
    },

}
</script>


<style >

</style>

在路由文件夹的index.js中, 进行路径的路由配置

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
可以看到显示如下

之所以还会有图片, 是因为在App.vue文件中, 定义了图片和路由视图,. 切换url , 只会改变路由视图, 而上面的图片是一直还在的.

Vue Router

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

 <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>

在App.vue中修改如下

完整代码

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

显示效果如图

点击去见周杰伦, 会跳转到 hello的路径

点击返回首页, 会跳转到返回首页路径