Vue2+VueRouter2+webpack 构建项目

简介: 1). 安装Node环境和npm包管理工具检测版本node -v npm -v图1.png2). 安装vue-cli(vue脚手架)npm install -g vue-cli --registry=https://registry.
1). 安装Node环境和npm包管理工具
  • 检测版本
node -v 
npm -v
img_6759383acf05dec901172da54b41bd8a.png
图1.png
2). 安装vue-cli(vue脚手架)
npm install -g vue-cli --registry=https://registry.npm.taob
ao.org
img_55aa5d733f735d03ef6e686ceb4b2a38.png
图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

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

img_2dac40b14ecc4414fa73aa5bc9fbde39.png
图3.png

4). 进入工程目录
cd logistics-vue
  • 目录结构


    img_9b0d21c2cb7304fbab8dfbb85ad62314.png
    图4.png
5). 修改package.json文件

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

6). 安装依赖包
npm install
img_6ed001de7d962a772b29a8e8951d3871.png
图5.png
7). 运行
npm run dev
img_0e29eed72c72d42d64a8de3606313a38.png
图6.png

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

img_9d7a8df0356f8692e91a1abf83a8552b.png
图7.png

8). 工程目录详解
img_5b2261ab700e4d6df3e8c1388e22a1d7.png
图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>

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>

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

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/>'
})

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>

V. 运行npm run dev

img_bb34b8d98fa68e31f27edd2bfda9a1ff.gif
图9.gif

10). 代码下载
目录
相关文章
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
147 1
|
7天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
52 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
54 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
44 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
11天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
6天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
10天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
60 12
|
6天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
27天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
54 8

热门文章

最新文章