谷粒商城学习——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>

<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
    }
  ]
})

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

 

路由跳转

不能使用a标签，要使用

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

to指定路由