vue + webpack + node 开发一个小demo

vue + webpack + node 开发一个小demo

一、构建项目

假设你已经安装好了node / npm / webpack / vue-cil环境。

进入到你要新建项目的文件夹下，新建一个vue项目。

1. $ vue init webpack one; //one 就是你的项目名称，我这里打算仿一下One app。

   执行这条命令后，会有一些提示输入：项目名称、项目描述、作者、是否使用vue-router、是否使用测试工具等等，这些完全根据各人的需求来定。

2. $ cd one; //进入项目目录

3. $ npm install; //安装依赖项；

4. $ npm run dev; // 运行项目

   然后浏览器会自动打开 localhost:8080/#/这个网址，看到如下页面，就代表项目已经构建好了。

   ​ ;

   把整个项目托经sublime中，可以看到目录结构是这样的：

   ​ ;

   这里再大概说以这些文件分别是干嘛用的：

   build文件夹里是一些webpack的文件，配置参数什么的，一般不需要做修改。

   config文件里是vue项目的基本配置文件 ，通常也不要修改。

   node_modules文件里是项目中安装的依赖模块。

   src源码文件夹，基本上文件都应该放在这里，你写的代码基本上都放在这里面。

   static生成好的文件会放在这个目录下。

   test测试文件夹，测试都写在这里 .

   .babelrc babel编译参数，vue开发需要babel编译 .

   .editorconfig 看名字和内容应该是编辑器的配置文件。

   .gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹 .

   index.html 主页 .

   package.json 是这个项目的一个文档说明，非常重要，在使用npm 安装依赖项的时候就是根据这个文件来的。 .

   README.md 介绍自己这个项目的。

5. 接下来重点研究一下src目录：

   ;

   –assets 资源文件夹，里面放一些静态资源,建议js、image、css文件都单独建文件夹存放。

   –components这里放的都是各个组件文件

   –router里面放的是路由文件

   –App.vue App.vue组件

二、写点东西看看效果

1. 在components目录下新建两个文件one.vue和two.vue，代码如下：

   one.vue文件：

   
   <template>
    <div class="hello">
      <h1>第一个页面</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'one',
    data () {
      return {
        msg: '一个vue 项目'
      }
    }
   }
   </script>

   two.vue文件：

   <template>
    <div class="hello">
      <h1>第二个页面</h1>
    </div>
   </template>
   
   <script>
   export default {
    name: 'two',
    data () {
      return {
        msg: '一个vue 项目'
      }
    }
   }
   </script>

2. 将index.js里的文件修改如下：

   import Vue from 'vue'
    import Router from 'vue-router'
   
    var Hello = require("../components/Hello")
    var one = require("../components/one")
    var two = require("../components/two")
   
    var routes = [
        {path:'/',component:Hello},
        {path: "/one",component: one},
        {path: "/two",component: two}
    ]
    Vue.use(Router)
    export default new Router({
      routes
    })

3. App.vue文件的template文件改成如下：

   <template>
    <div id="app">
      <img src="./assets/images/logo.png">
    <router-link to="/one" class="">
        <p>去这里看看</p>
      </router-link>
      <router-link to="/two" class="">
        <p>去那里看看</p>
      </router-link>
      <router-view></router-view>
    </div>
   </template>

4. 运行项目:$ npm run dev,打开浏览器会看到如下页面：

   

   点击两个链接，分别会包含one.vue和two.vue组件，同时地址栏的参数会改变。

   ​