• 最近抽空中看了一下VueJs，瞬间对他产生了兴趣，有着angularjs相同的双向绑定，同时有着相对于angularjs没有的简洁我方便。

  安装环境

  # 最新稳定版本
  $ npm install -g vue  全局安装
  # 最新稳定 CSP 兼容版本
  $ npm install vue@csp

  ---

  # 全局安装 vue-cli
  $ npm install -g vue-cli
  # 创建一个基于 "webpack" 模板的新项目
  $ vue init webpack project-name
  # 安装依赖
  $ cd project-name
  $ npm install
  $ npm run dev 启动项目

通过上面的一系列命令，我们便成功启动了项目，这时我们可以在浏览器中输入:http://localhost:8080/

• 相对来说环境的安装就到这里了，需要的webpack 环境一系列的都成功了，webpack 配置文件在build 里面，可以根据自身的需要，进行相对应的修改，关于配置的讲解这里就不说了，如果大家有需要讲解配置的，可以在博客下方进行留言。

• 环境搭建完毕，我准备大展伸手，体验一下vueJS 优美，便捷的时候，网上看了几个demo ，都是将 Vue(html), css,js 写在同一个文件里面,于是我决定把css，js静态文件提取出来。看了下配置文件，项目里面有src/assets 就是静态文件的目录。于是把css，js都写在里里面。保存程序的时候，居然报错了。。。。。

我擦，一个 引用静态css的方法居然报错了，分析原因:

• 首先通过localhost:8080/src/assets/css/style.css 访问静态文件，无法访问。这样一来，这就是webpack 配置的原因了，查看了下配置

  module: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue'
    },
    {
      test: /\.js$/,
      loader: 'babel',
      include: projectRoot,
      exclude: /node_modules/
    },
    {
      test : /\.css$/,
      loader : "style-loader!css-loader"
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url',
      query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      test: /\.(eot|woff|ttf|svg)$/,
      loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
    }
  ]
  },

照这样的配置来看，在vue中引用png 图片的话，是没问题的，而且会将图片转为地址或转base64给你，那么是因为css，没有写相对应的转了，于是开始写将 css loader改掉

   {
      test: /\.css$/,
      loader: 'url',
      query:{
          limit:10000,
          name: utils.assetsPath('css/[name].[hash:7].[ext]')
      }
   }

• 接着启动程序，在跑，尼玛，还报错，css 地址依然不能访问；没办法，只能看官方文档了。 找了了解决方法：

  1.如果Vue中要引用静态文件，需要在 src 同等的目录下新建static 文件夹，然后将静态文件访问其中， 引入，大功告成 （这个成为连接式引用）

  2.如果要引用assets里的静态文件，需要在.vue文件中这样引入： （这种模式的话成为导入式引用）

  <style>
  @import url('./assets/blog.css');
  </style>