vue2入门之vue-cli

2019-12-08

vue-cli

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

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

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

npm install -g vue-cli

安装成功后,在你的创建一个你的项目文件夹,cmd进入的文件夹
cmd到文件夹

输入命令:

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

  • 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全部使用

评论(0条):