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

vue 模块化开发 cmd窗口中初始化脚手架项目

1. npm install webpack -g 全局安装webpack 在cmd中输入 npm install webpack -g 即可安装 注意要把快速编辑模式去除, 以免安装的时候卡顿
2. npm install -g @vue/cli-init 在cmd中 , 输入npm install -g @vue/cli-init 安装全局的vue脚手架
3. 新建一个文件夹,用于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 代码内容如下

     你好 , hello  ,{{name}}  

 



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

}

在路由文件夹的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

 
    
    
    Go to Foo

在App.vue中 修改如下 完整代码

  
     

        去见周杰伦
            返回首页

    
    
  



export default {
  name: 'App'
}



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

显示效果如图

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