引言

博主写该篇时也是vue刚入门，以下有些说法不能以偏概全

Vue.js作为主流的JavaScript框架,对于学习入门者还是比较友好的，不过还是有不少坑要我们去踩。

之前根据网上教程直接写过Vue+Webpack的配置，遇到的最大的坑就是Vue和Webpack以及一些包的版本不匹配问题，这些东西都更新的太快，新版本对低版本又不太兼容，报错又不直接告诉你是版本问题，还得自己试着npm install低版本才知道，说多了都是泪。

幸好Vue家庭有位成员可以直接帮你配置好一切基础文件，开发者要做的，就是开始写自己的代码。可是，Vue-cli脚手架配置也是吃素的，本次主要总结我在初使用Vue-cli所遇到的坑。

vue-cli安装与解析

虽然说脚手架目的是为了高效开发，但本着生命不息折腾不止的原则，还是得尽量弄懂，说不定以后会有写个性化的配置需求

脚手架的安装及启动

全局安装 vue-cli

打卡命令行，输入：

1	npm install -g vue-cli

生成项目

在命令行中进入到项目目录（也可以直接文件夹内重新打开命令行），然后输入：

1	vue init webpack Vue-Project

其中Vue-Project 是自定义的项目名称， webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板，不过目前用常用的‘webpack’模板就够了。

这一步命令执行可能会比较慢，甚至非常慢，可以找个网络好的地方再进行，命令执行完成之后，会让用户输入几个基本的选项，如图所示

需要注意的是项目的名称不能大写，不然会报错。

Project name : 项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写。

Project description: 项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git，他会读取.ssh文件中的user。

Install vue-router? 是否安装vue的路由插件，

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格小坑

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。

Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试。

Should we run npm install for you after the project has been created?(recommended)npm

待模板加载完成之后会在当前目录生成一个以该名称命名的项目文件夹

目录结构

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试脚本的配置
|-- src                              // 源码目录
|   |-- components                   // vue所有组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- test                             // 测试文件
|   |-- e2e                          // e2e 测试
|   |-- unit                         // 单元测试
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore                    // eslint检测代码忽略的文件（夹）
|-- .eslintrc.js                     // 定义eslint的plugins,extends,rules
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明，markdown文档
|-- index.html                       // 访问的页面
|-- package.json                     // 项目基本信息,包依赖信息等

命令字段

package.json文件是项目的配置文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "build": "node build/build.js"
}

npm run dev 或 npm start : 启动本地服务器，热更新就绪
npm run build ：将工作区源码打包可上线文件，默认目录放在根目录下dist文件夹，

坑

路径坑

通过上面的步骤，运行npm run dev可以通过 ‘http://localhost:8080/' 来本地预览项目，而通过运行 npm run build 打包生成dist文件夹文件后，直接打开dist文件夹下的index.html，浏览器也许什么都不显示，调试器直接告诉你资源找不到，这就是遇到的坑之一，问题的根源是文件打包路径不正确导致的，解决办法是：

修改config => index.js => build => assetsPublicPath 中的’/‘成为’./‘

修改之后再 npm run build 打包，再浏览器打开 index.html 就能正常显示了。

可再你引用的本地资源，比如你在一个组建的中，某一元素用了图片背景url,同样运行npm run dev预览是没有问题的，而运行npm run build,图片不显示，调试器也依然告诉你，资源没有找到。

这里我们还得再修改一个地方：

在build => util.js 里找到ExtractTextPlugin.extract （找准位置，别找错地方）

修改之后再 npm run build 打包，再浏览器打开 index.html 就能图片正常找到了。

代码格式报错

还记得我们一开始vue init webpack Vue-Project之后输入的项目信息么？其中的

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格

如果是敲了Yes,则后续在写项目过程中，编译时可能会时不时的报代码格式错误，虽然不影响运行，项目的展示，调试器只是报一大堆警告，要是闲这些警告很烦，那就一开始配置Use ESLint to lint your code? 时就选择 No 吧！一个json数据的代码格式就能烦死人。

循环引用组件问题

做项目时遇到使用循环组件，因为模式一样，只有数据不一样。但是按照普通的组件调用格式来做时报错，错误信息为

Unknown custom element: 《bob》 - did you register the component correctly? For recursive components, make sure to provide the “name” option.

问题原因是：循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入。

解决的方式是：全局引入组件，并且在vue实例化前。

还记得之前所列举的项目中各个文件的基本用途么？其中

src 》 main.js // 程序入口文件，加载各种公共组件

所以在main.js中new Vue()之前引入要用的公共组件

1	import bob from "@/components/bobViews/bob.vue"

引入JQuery

vue项目中如果需要，还是可以引入JQuery并使用JQuery语法的。

而且目前很多流行的css框架也依赖于JQuery,eg:BoootStrap;

具体引入方法如下：

webpack有providePlugin插件，可以自动引入模块。所以需要在项目工程的webpack.base.config.js中添加以下配置：

const webpack = require('webpack')

  plugins: [
    new webpack.ProvidePlugin({  //引入Jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery':'jquery'
    })
  ]

这样配置后，如果报错 ‘$ is not defined’ ,则eslint认为没有声明，需要在eslintrc.js中加入globals配置：

globals: { 
   '$': false,
   'jquery': false
 }

提示

修改了配置最好重新启动一下项目

结言

总得来说，Vue有Vue-cli的加持，做起项目来是省了不少时间精力的，只要我们能避免一些坑，上手就不是问题，或者解决这些坑，我们能学到的东西就会越来越多的。

上面总结的可能不是很详细，但一些基本问题还是概况进去了。

遇到问题不是坏事，遇到问题而不去思考不去解决才是坏事。

嘿！朋友，VUE全家桶了解一下

vue-cli的救赎