Vue2+VueRouter2+webpack 构建项目

1). 安装Node环境和npm包管理工具

• 检测版本

node -v 
npm -v

        

          
        
        
        

          

          AI 代码解读
        
      
      

图1.png

2). 安装vue-cli(vue脚手架)

npm install -g vue-cli --registry=https://registry.npm.taob
ao.org

        

          
        
        
        

          

          AI 代码解读
        
      
      

图2.png

3). 新建工程

# 在线创建
vue init webpack logistics-vue
# 离线创建：下载https://github.com/vuejs-templates/webpack，解压到C:\Users\mazaiting\.vue-templates\webpack
vue init webpack logistics-vue --offline

        

          
        
        
        

          

          AI 代码解读
        
      
      

若无法登陆到Github方法，可在此处下载

图3.png

4). 进入工程目录

cd logistics-vue

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 目录结构

  
  
  

  图4.png

5). 修改package.json文件

删除这一行"chromedriver": "^2.27.2",

6). 安装依赖包

npm install

        

          
        
        
        

          

          AI 代码解读
        
      
      

图5.png

7). 运行

npm run dev

        

          
        
        
        

          

          AI 代码解读
        
      
      

图6.png

执行命令之后, 在浏览器中打开链接http://localhost:8080

图7.png

8). 工程目录详解

图8.png

• build: 此文件夹下存放编译生成的文件
• config: 配置文件夹，dev.env.js、prod.env.js、test.env.js分别是开发，生产，测试环境下的配置文件
• node_modules: 依赖库
• src: 源代码及资源存放路径，assets中存放资源文件，components中存放组件，router存放路由相关文件，App.vue是入口文件，main.js是项目的核心文件。全局的配置都在这个文件里面配置。
• static: 未知。
• test: 测试文件夹

9). 自定义页面

I. 在src目录下新建pages文件夹，并新建FirstPage.vue和SecondPage.vue文件
FirstPage.vue

<template>
  <div class="container">
    firstPage
  </div>
</template>

<script>
  /* eslint-disable quotes */
  export default {
    name: "first-page"
  }
</script>

<style scoped>
  .container {
    color: black;
  }
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

SecondPage.vue

<template>
  <div class="container">
    Second Page
  </div>
</template>

<script>
/* eslint-disable quotes */
  export default {
        name: "second-page"
    }
</script>

<style scoped>
.container {
  color: blue;
}
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

II. 在router下新建router.js文件，并配置路由
router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from './../components/HelloWorld'
import FirstPage from './../pages/FirstPage'
import SecondPage from './../pages/SecondPage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/FirstPage',
      name: 'FirstPage',
      component: FirstPage
    },
    {
      path: '/SecondPage',
      name: 'SecondPage',
      component: SecondPage
    }
  ]
})

        

          
        
        
        

          

          AI 代码解读
        
      
      

III. 修改main.js，使其引用router.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 屏蔽router路径下的index.js文件
// import router from './router'
import router from './router/router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

        

          
        
        
        

          

          AI 代码解读
        
      
      

IV. 修改HelloWorld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <div class="nav-list">
      <router-link class="nav-item" to="/">index</router-link>
      <router-link class="nav-item" to="/FirstPage">页面一</router-link>
      <router-link class="nav-item" to="/SecondPage">页面二</router-link>
    </div>
    <ul>
      <li>12312313213</li>
    </ul>
  </div>
</template>

<script>

  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

V. 运行npm run dev

图9.gif

10). 代码下载