环境

• 安装nodejs
  官网下载地址，下载安装完验证node --version，如果显示版本号则安装成功！
• 安装vue-cli
  通过npm命令安装vue-clinpm install --global vue-cli。（全局安装，否则在其他目录下又要重新安装一次vue-cli）
• 创建vue-cli项目
  输入命令vue init webpack vuetest，显示项目信息选项：Project name (vuetest),Project description (A Vue.js Project)……选择完Installing project dependencies ...vue-cli模板项目就创建成功。

常见问题

• npm run build后，index页面访问不了。
  解决方法：在 config/index.js中修改build:{assetsPublicPath: './'}

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
  
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    ...
  }
  

• npm run build后，css里的背景图片显示路径错误，图片路径引用放在assets目录下。
  解决方法：在 utils.js中增加publicPath: '../../'。

   // Extract CSS when that option is specified
   // (which is the case during production build)
   if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       publicPath: '../../'
     })
   } else {
     return ['vue-style-loader'].concat(loaders)
   }
  

• 通过data数据绑定的本地图片地址，显示不出
  解决方法：通过require加载

   <img :src="icon">
  

    data () {
      icon: require('../assets/images/s_blog.svg')
    }