vue2入门之vue-cli

vue-cli

• vue在web前端可谓是大放异彩，尤为在国内与angular、react有三足鼎立之势。不少人想入门vue2而又苦于不知从何下手。由于vue2是以组件化开发的，最好要搭配webpack构建工具开发，而webpack不少人还不能独立配置。
  而vue-cli脚手架就能很好解决这一问题。即便你对webpack还不是很了解，你也能够先搭建好项目在慢慢研究。由于cli已经所有帮咱们将须要的东西配置好了，你只要写好项目的业务，在用命令行就能够达到调试或打包的功能。

• 在这里我会默认你们的电脑已经装好node环境

---

利用npm对vue-cli进行全局安装

npm install -g vue-cli

安装成功后，在你的建立一个你的项目文件夹，cmd进入的文件夹

输入命令：

接下来会有几个要填的选项

• project name: 这个是你的项目名
• project description: 你的项目描述
• author： 做者
• Vue build： 编译选第一个就行了，直接回车
• install vue-router： 是否装路由
• use eslint to lint your code: 是否装eslint检查你的代码规范（看我的，有些人被这个搞得要死要死的，不过我建议开启。规范本身写代码的习惯，痛苦指示暂时的）
  Pick an ESLint preset (Use arrow keys)（选择题）： 选择一个ESLint预设标准
  Standard： 预设一（查看这个标准的详情）
  AirBNB ： 预设二（查看这个标准的详情）
  none： 自定义
• Setup unit tests(Y/n)： 是否安装单元测试
• Setup e2e tests with Nightwatch(Y/n)： 是否安装e2e测试

安装完成

接下来你就能够看到你的项目目录了

这里的各个文件夹所存放的分别是：

• build： webpack的配置文件(通常不用去动他)
• config: 这里也是webpack的配置文件，不过是给咱们配置的
• src: 咱们的项目源代码
• static: 静态资源目录（存放一些第三方js库什么的）
• .eslintrc.js: eslint的规则
• test: 若是装了测试模块的会有这个（初学者不建议先玩这个，先把基本功能搞定先）

build和config：

具体的功能我建议看hongchh的一篇文章写的很详细我就不必在写一遍了vue-cli的webpack模板项目配置文件分析

src：

平时的代码源码都在这里面写就行了

static：

须要引入静态资源，例如jq的一些插件库，没有npm和cdn的。将js放到这里。而后在index.html里引入：

<script src="./static/lib/jq.xxx.js"></script>

.eslintrc.js：

这里能够配置不须要哪一些规则具体的规则选项能够查看eslint

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

如何启动项目

进入你的项目文件夹内先把依赖装好（若是慢的话，能够切到cnpm）

npm i

装好相关依赖后再输入命令启动项目（开发模式）就能够看到亮眼的v了

npm run dev

如何打包：

命令：

npm run build

打包完后你就会在你的项目文件夹里发现一个dist的文件夹里面就是打包完的项目

---

以上就是vue-cli所有使用(写的不对或不足之处望指出)