• 谷粒商城学习——P43使用vue脚手架进行模块化开发


    也可参考我之前的文章vue环境搭建

    vue模块化开发

    1,全局安装webpack(项目构建工具)(已安装可省略)

     npm install webpack -g

    2,全局安装vue脚手架。这个vue不同版本命令还不一样(已安装可省略)

    npm install -g @vue/cli-init  

    3,使用webpack初始化vue项目

    vue init webpack appname

    4,启动vue项目

    npm run dev 

     项目目录结构说明

    build:项目打包工具(webpack)有关代码

    config:配置信息,包括端口号等

    node_modules:当前项目安装的所有依赖

    src:我们编写代码的文件夹

    static:存放静态资源的文件夹

    .babelrc:语法转义的相关配置

    index.html:首页相关内容

    package.json:依赖包的信息

    package-lock.json:依赖包的详细信息

    项目是如何运行的?

    index.html:项目主入口

    src/main.js:项目主程序

      el挂载index.html中指定的元素

      router,简写形式,全写router: router,指定页面跳转路由

      components:使用的组件,App是简写形式(属性名和属性值一样的情况可简写),全写{App:App}

      template:元素最终渲染指定的模板

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    App.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <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>
    View Code

    <router-view/>是路由视图,main.js中指定import router from './router'路由是从router/index.js导入

    router/index.js

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

    routes是路由,规定访问路径path会使用component: HelloWorld的组件(多次测试发现name好像没什么用,以后发现有用的话再补充上),这个组件在import HelloWorld from '@/components/HelloWorld',@代表src的根目录

    路由跳转

    不能使用a标签,要使用

     <router-link to=""></router-link>

    to指定路由

  • 相关阅读:
    一笔画问题(搜索)
    Sum
    js获取时间日期
    [Hibernate 的left join]Path expected for join!错误
    关于firefox下js中动态组装select时指定option的selected属性的失效
    mooltools扩展之前已经定义好的方法和json数据
    HttpSession, ActionContext, ServletActionContext 区别
    japidcontroller自动绑定的数据类型
    ConcurrentModificationException
    Hibernate中使用COUNT DISTINCT
  • 原文地址:https://www.cnblogs.com/yanan7890/p/14877574.html
Copyright © 2020-2023  润新知