Vue 2.0 开辟谈天顺序（一）: 初建项目

2019年8月31日 138次阅读 来源: ermu

勤奋了，不一定能胜利，然则不勤奋，觉得好惬意啊
　　　　　　　　　　　　　　　　　　　——努训

没有相识过vue1.*，直接上手vue2.0；虽然有些费劲但照样很兴奋了学下来了。

一丶环境设置

  • node.js
    运用6.2.2版原本开辟
    我运用了nvm来治理我的node，nvm能够很轻易的切换要运用的node版本

  • npm 运用3.9.5版本
    npm设置了淘宝镜像

    npm config set registry https://registry.npm.taobao.org

  • sublime-text 3
    这款编辑器异常好用，虽然没有webstorm那末周全，然则装多点插件也差不多啊
    装了以下好用的插件：

    1. Vue Syntax Highlight 这个必需的好嘛，没有这个.vue文件都不高亮

    2. Theme – Coffee 比较喜好的一款配色

    3. ColorPicker 装了这款插件以后就可以够兴奋的编辑色彩了

    4. Emmet 能够自动拓展html和css代码的插件

    5. SublimeCodeIntel 代码提醒了不全插件 支撑很多言语

    6. Alignment 代码对齐插件 之前用2的时刻装置了 如今3上面还没有装置

    7. SublimeEnhancements 这个插件给侧边栏增加了很多的拓展功用，比方新建文件或文件夹，用浏览器翻开文件等

  • webpack 装置版本 webpack@1.14.0
    webpack是一款前端资本模块化治理和打包东西，它能够将很多松懈的模块根据依靠和划定规矩打包成相符临盆环境布置的前端资本。还能够将按需加载的模块举行代码分开，比及实际须要的时刻再异步加载。经由历程 loader 的转换，任何情势的资本都能够视作模块，比方 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
    进修链接：http://blog.csdn.net/keliyxyz…
    确认装置webpack胜利并检察装置的webpack版本

        webpack

    直接在敕令行输入webpack？，对的。假如装置胜利，就可以看到一下的信息，第一行的1.14.0就是我装置的版本号o(∩_∩)o

        webpack 1.14.0
Usage: https://webpack.github.io/docs/cli.html

Options:
  --help, -h, -?
  --config
  --context
  --entry
  --module-bind
  --module-bind-post
  --module-bind-pre
  --output-path
  --output-file
  --output-chunk-file

  • vue-cli 我装置的版本2.5.1
    vue-cli是一个用于天生vue项目的脚手架东西，不引荐新手直接用vue-cli，尤其是对 Node.js 构建东西不够相识的同砚。还好本身会点node，因而很不怕羞的用了

    npm install -g vue-cli

    同样在敕令行输入 vue -V 检测是不是装置胜利并检察装置的版本，注重是大写的V
    假如胜利返回：

    C:\Users\59227\Desktop>vue -V
2.5.1

  • vuex 我装置的版本为2.1.1
    Vuex 是一个专为 Vue.js 运用程序开辟的状况治理模式。它采纳集合式存储治理运用的一切组件的状况，并以响应的划定规矩保证状况以一种可展望的体式格局发生变化。Vuex 也集成到 Vue 的官方调试东西 devtools extension，供应了诸如零设置的 time-travel 调试、状况快照导入导出等高等调试功用。
    能够理解为组件通讯的集合治理。
    装置和运用在以后的实践历程当中解说。

  • vue-router
    用于SPA完成单页路由，相似angular的angular-ui-router。
    装置和运用在以后的实践历程当中解说。

二、最先搭建项目x-chat

搭建项目之前，去看了他人的文章，试着撸了一遍代码，也就是个反复造轮子的历程，觉得没有意义，所以才萌生出写个本身的项目的主意，恰好准许帮他人做一个npp谈天插件的前端，就拿来练手了。

直接最先：

前面提到了vue-cli脚手架东西，运用起来很简单，在你想建立项目的目次下输入cmd：

    vue init webpack x-chat //x-chat就是项目的名字

在输入以后会涌现很多设置项，一起enter就可以够了。然则个中的ESLint引荐不运用(运转的时刻会搜检代码范例，范例什么的太贫苦，毕竟是小demo)，ESlint是能够设置范例的，在多人合作开辟的历程当中，代码的范例异常的主要。有一套优越的代码范例，关于项目的开辟和保护都很友爱。我这里不必，是因为设置贫苦，以及运转的时刻总报错很影响心境。。

下面临每一个设置项做个解释：

? Project name x-chat   //项目名默许就是x-caht
? Project description A Vue.js project // 文档形貌，会在README.md文件上天生输入的内容，默许 A Vue.js project
? Author _**** <****@**.com> // 作者，假如有git，就是读取git的User信息
? Vue build standalone // 有两个选项，第一个选项写着recommended for most users坚决选了（至于干什么用到并不知道）
? Use ESLint to lint your code? Yes// 是不是运用ESlint 默许是
? Pick an ESLint preset Standard // 选这个一个ESlint范例
? Setup unit tests with Karma + Mocha? Yes //运用单元测试东西karma和mocha 默许是
? Setup e2e tests with Nightwatch? Yes // 运用e2e测试框架 NightWatch 默许是

翻开我们的项目，能够看到以下的目次构造：

《Vue 2.0 开辟谈天顺序（一）: 初建项目》

  • build：webpack打包设置文件夹

  • config： 同样是打包设置的文件夹，只是职能差别

  • src：源码寄存文件夹

  • static： 静态文件寄存位置

  • test：测试代码寄存位置，睁开能够看到单元测试和e2e测试两个目次

  • .babelrc ： babel的设置文件，有关babel可拜见：http://www.ruanyifeng.com/blo…

  • index.html: 单页运用的html文件，能够看成是一个窗口(window)

  • package.json: npm的设置文件，设置项目信息，须要装置的模块之类

  • README.md： 项目申明文档

目次剖析完了，怎样启动这个项目呢？

在启动之前还须要装置我们的依靠模块，也就是package.json内里的模块，在根目次下cmd：

    npm install

这个历程有点久，发起将npm设置为国内镜像，比方我之前说得淘宝镜像
装置完了以后我们的项目目次会多出一个node_modules目次，内里会有很多很多文件夹，贼大。

装置完以后就运转我们项目了，在根目次下cmd：

    npm run dev

这个敕令能够在package.json中找到：

{
  "name": "x-chat",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ex_fulin <lin.fu@partner.midea.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js", //就是这里
    "build": "node build/build.js",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
    .....

然后浏览器中输入localhost:8080（实在会自动弹出），就可以够看到以下页面

《Vue 2.0 开辟谈天顺序（一）: 初建项目》

功德圆满！！这一章就到这里了。

    原文作者：ermu
    原文地址: https://segmentfault.com/a/1190000007946286
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞