[关闭]
@hotjp 2017-10-30T16:16:06.000000Z 字数 573 阅读 1163

vue.js开发环境搭建

培训


本次着重介绍的内容是在学习过程中如何快速搭建一个vue的开发环境,旨在新手阶段快速进入状态,和日常开发略有出入。

  1. # 全局安装vue-cli
  2. $ npm i -g vue-cli

image.png-117.3kB

安装过程视网络情况而定,完成后可以验证一下

  1. # 查看vue-cli版本
  2. $ vue --version

image.png-24kB

在对应目录快速创建新项目

  1. # 前往项目目录
  2. $ cd xxxxx
  3. # 用webpack版本代码进行初始化,最后一个参数是文件夹名称
  4. $ vue init webpack test

image.png-340.9kB

  1. # 初始化选项

image.png-145.8kB

可以按照我的配置,最后两个是测试框架,不需要,eslint其实也可以不要。。嗯,可以不要,在编辑器里配置也可以

im age.png-214.9kB

初始化完成后会看到这个提示。照着敲一下,就可以安装依赖,跑起来vue-dev-server了

image.png-171kB

浏览器版

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. </div>
  10. <script rc="https://cdn.jsdelivr.net/npm/vue"></script></body>
  11. <script src="https://cdn.jsdelivr.net/npm/vue-router"></script></body>
  12. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注