vue2 + webpack + node 开发一个小demo

这里是一个简单的vue项目的小例子，不打算介绍有关vue语法相关的知识，建议直接去看vue官方文档;这里只从项目整体做一个介绍[包括怎么构建项目，各文件的作用，怎么把自己的各个模块整合到一起],这是最简单的例子，稍微复杂的例子请看手把手教你用Vue2+webpack+node开发一个H5 app。

一、构建项目###

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

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

1. $ vue init webpack One; // 这里One 就是你的项目名称。

   执行这条命令后，会有一些提示输入：项目名称、项目描述、作者、是否使用vue-router、是否使用测试工具等等，这些完全根据各人的需求来定，但是在出现 'Use ESLint to lint your code? (Y/n)'提示的时候，个人建议最好选择n,因为如果要使用ESLint的话，你就得非常注意你代码的空格和缩进，不然会报很多错误。

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

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

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

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

   

   项目初始启动页

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

   ​
   

   项目目录结构

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

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

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

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

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

   static静态资源放在这个目录下，这个目录下的资源文件默认是不会被打包压缩的。

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

   .babelrc babel的配置参数，babel将ES6的语法进行编译 .

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

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

   index.html 项目的主页 .

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

   README.md 介绍自己这个项目的一个Markdown文件。

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

   

   src目录

   --assets 静态资源文件夹。

   --components这里放的都是自己定义的组件文件

   --router里面放的是路由文件

   --App.vue App.vue组件，

我们发现在上面已经提到有一个资源文件static了,但是src里还有一个资源文件 assets,这两个有什么区别呢？我觉得有以下两点(以下是个人见解，如果有不对的地方，还请指出，谢谢。)：

• 放在static文件夹下的文件不会被打包压缩，只会被拷贝到dist文件下的static文件里，而放在assets里的文件是会被打包压缩的,包括图片文件，就拿刚才构建好的项目做个实验，我们看到assets里有个图片文件，我们使用命令'npm run build'打包项目后，在dist文件夹下并没有看到这个图片文件，这个图片文件已经被打包了。这里对于图片文件的默认处理方式是这样的：如果这个图片大于10KB，就会被单独打包到dist/static/img文件下，如果这个图片文件不大于10KB，就会把这个图片转成base64的格式，所以刚才那个图片打包之后并没有在dist文件下找到，这个对于图片的打包的配置，可以在build/webpack.base.conf.js文件里找到这么一段代码，可以在这里进行配置：

      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },

• 放在两个文件夹下的静态资源引用方式是不同的，比如放在static里的图片，我们在引用的时候，都是从绝对路径，都是从static目录开始的，比如要引用一个static下的logo.png,不管是在那个文件里引用，我们都这样写路径：/static/logo.png,但是assets里的文件就不同了，引用的时候要写相对路径，在不同的目录里引用文件，路径是不同的。

二、写点东西看看效果###

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

   one.vue文件：

   two.vue文件：

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. Hello.vue文件的template文件改成如下：

    
    
    
   
   4. 运行项目:`$ npm run dev`,打开浏览器会看到如下页面：
   
   ![页面](http://upload-images.jianshu.io/upload_images/1109110-418459704d04a7ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   
   5. 点击`去第一个页面看看`，会跳转到下面这个页面，同时地址栏的参数会改变。
   
   ![页面](http://upload-images.jianshu.io/upload_images/1109110-127d2c118eb9ee13.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   
   6.  点击`去第二个页面看看`，会跳转到下面这个页面。
   
   ![页面](http://upload-images.jianshu.io/upload_images/1109110-7e4701867f9629dc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   ​