vue+node+webpack

最新推荐文章于 2024-08-02 18:34:10 发布

Awna

最新推荐文章于 2024-08-02 18:34:10 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/forwujinwei/article/details/73457365

版权

使用node+webpack
前提条件:node,npm已经安装好

安装Vue-Cli

npm i -g vue-cli

初始化项目目录

vue init webpack XXX（你想要项目的名字）

安装npm

cd XXX
npm install （这里建议使用淘宝镜像cnpm，不然墙外的东西……）
这里写图片描述

如果是新手就不要安装ESlint,要不然比较纠结,影响基情.

运行项目

在项目根目录下运行:npm run dev
这里写图片描述
这样基本结构就搭建起来了.

生成目录结构作用

下面所说不一定完全正确,请多多见谅
这里写图片描述
其实对弈一个项目来说,是由一个团队完成的,让整个团队成员明白整个项目整体框架是写代码前必须要做的,只有这样才不会出现乱七八糟,后期无法维护的情况.下面就vue-cli生成的目录结构做简单说明,我在这里没有选择生成test目录,当然在后期项目开发过程中可以新加其他目录方便管理整个个项目,例如一如工具类等

1.build: 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。
2.config: 配置目录，默认配置没有问题，所以我们也不用管
3.node_modules: 这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管
4.src: 我们的开发目录，基本上绝大多数工作都是在这里开展的
5.static: 资源目录，我们可以把一些图片啊，字体啊，公共js等放在这里。
6.test :初始测试目录
7..xxxx文件这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
8.index.html 首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头
9.package.json 项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。
10.README.md 不用管

开发基本动的就是src目录,我们再看看src相关目录

这里写图片描述
再这里引入了vue-router,所以生成router,components顾名思义就是组件,也就是vue思想的体现,组件化开发,在其下面放置各种组件,根据模块新建文件夹管理模块,router是路由,这儿体现的是vue的路由,和node的express模块下的router差不多,作用不太一样.具体用法后面有机会再说.

项目启动后代码是如何执行的

我们看几个关键的文件
这里写图片描述

####1. index.html是项目的入口,看看代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue_node_bootstrap</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.main.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' //后期使用node.js进行改造成require
import router from './router'//默认加载index.js,其他名字不行,如果要加载请使用全路径.

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',//index.html下的id='app'的div
  router,//index.js的路由对象
  template: '<App/>',
  components: { App }//组件App.vue
})

3.App.vue

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

4.index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//在访问根目录的时候会调用Hello组件渲染app.vue
      name: 'Hello',
      component: Hello
    }
  ]
})

5.Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',//指定组件名称
  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>

这样在使用vue-router时,整个代码的执行流程就通了,如果想添加组件怎么办?

想了解更多java相关技术，请关注公众号“JavaEE那些事”

扫描下面二维码，更多技术资料等你来拿
这里写图片描述

Awna

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue+node+webpack

使用node+webpack 前提条件:node,npm已经安装好安装Vue-Clinpm i -g vue-cli初始化项目目录vue init webpack XXX（你想要项目的名字）安装npmcd XXX npm install （这里建议使用淘宝镜像cnpm，不然墙外的东西……）如果是新手就不要安装ESlint,要不然比较纠结,影响...
复制链接

扫一扫