前端框架小试牛刀 node+webpack+vue

背景

最近喜欢弄上前端的框架研究，对于前端知识还停留在 JavaScript+Html+css 被公司前端小伙伴嘲讽技能深深的嘲讽了一波。我喜欢研究东西走大的方向去研究后再完善小的的知识点。

环境准备

• Node 安装

  node 安装应该不需要说，傻瓜式安装

• webpack 安装

  安装好 node 和 npm 后，就可以直接安装 webpack

  npm install webpack -g;
  ​

• 安装 vue-cli 构建工具

  Vue 环境的构建工具

  npm install vue-cli -g;
  ​

• 创建一个 Vue 项目

  vue init webpack demo
  ​

  

这一系列的问答自己决定

开始

经过如上的准备工作后，再你的当前文件夹下就创建了一个名为 demo 的项目

 cd demo;
 npm install;
 npm run dev;
​

这样前端项目就跑起来了 很简单！！！！！

会自动生成这些目录

目录代表啥意思？

build 文件夹里是一些 webpack 的文件，配置参数什么的，一般不需要做修改。
config 文件里是 vue 项目的基本配置文件 ，通常也不要修改。
node_modules 文件里是项目中安装的依赖模块。
src 源码文件夹，你写的代码基本上都放在这里面。
static 静态资源放在这个目录下，这个目录下的资源文件默认是不会被打包压缩的。
test 测试文件夹，测试都写在这里 . （我刚才把测试给去掉了 …………）
.babelrc babel 的配置参数，babel 将 ES6 的语法进行编译 .
.editorconfig 看名字和内容应该是编辑器的配置文件。
.gitignore 用来过滤一些版本控制的文件，比如 node_modules 文件夹 .
index.html 项目的主页 .
package.json 是这个项目的一个文档说明，非常重要，在使用 npm 安装依赖项的时候就是根据这个文件来的。（这个相当于 pom.xml 文件哦）
README.md 介绍自己这个项目的一个 Markdown 文件。

我们主要还是使用 src 下面的东西 所以主要说一些 SRC

这里可能没看过 VUE 的人不知道，没关系，先看了再说，我也不懂

assets 静态资源文件夹。
components 这里放的都是自己定义的组件文件
router 里面放的是路由文件
App.vue App.vue 组件，

动手写点东西？

这个前端开发有点像后端，分功能模块和层次，值得研究

首先我们先写一个 demo 模块

内容如下

<template>
  <div class="hello"> 
    ![](../assets/logo.png) 
    <h1>{{msg}}</h1>
  </div> 
</template> 

<script>
export default {
  name: 'demo',
  data () {
    return {
      msg: 'demo 页面'
    }
  }
}
</script>
​

修改 router\index.js 内容如下：

import  Vue  from  'vue'

import  Router  from  'vue-router'

import  HelloWorld  from  '@/components/HelloWorld'

import  demo  from  '@/components/demo'

Vue.use(Router)

var  routers  = [

{

path:  '/',

name:  'Hello',

component:  HelloWorld

},

{

path:  '/demo',

name:  'demo',

component:  demo

}

]

export  default  new  Router({

routers

})
​

我们修改欢迎页面 添加一个链接 /components/HelloWorld.vue

<router-link to="/demo" class="">
       <p>测试页面</p>
</router-link>  
​

最后 开始重新启动

npm run dev
​