vue-cli初步

1.安装node.js

下载安装node.js,一路默认安装即可,安装完毕,启动命令行,输入命令node -v,可以看到node.js的版本号

image.png

2.安装vue-cli

  • 使用npm(需要安装node环境)全局安装webpack,启动命令行,输入如下命令:
npm install -g webpack

耐心等待安装完成之后输入 webpack -v,可以看到如图所示


image.png
  • 从webpack 4.X开始,需要全局安装webpack-cli
npm install webpack webpack-cli -g

image
  • 全局安装vue-cli,在cmd中输入命令
npm install --global vue-cli

耐心等待安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。


image.png

打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到

image.png

npm目录.jpg
打开node_modules也可以看到:


image.png

3.用vue-cli来构建项目

首先在D盘新建一个VueStudy作为项目存放地,然后使用命令行cd进入到项目目录,输入

                    vue init webpack demo

需要选择一些选项,会跳出几个选项让你回答:
Project name (demo): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母)
Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字
Author ():默认
接下来会让用户选择:
Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用。yes
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的。no
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试no

Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 no

配置完成后,进入demo项目目录,安装依赖

npm install

启动项目

npm run dev

运行成功(服务启动成功后浏览器会默认打开一个“欢迎页面”)


image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容

  • vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具v...
    陶然然_niit阅读 1,372评论 0 8
  • vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,Git...
    阿尔法乀阅读 9,525评论 0 4
  • Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端...
    玄木阅读 272,706评论 70 259
  • 今天预约了一家业主维修,她让我早点去,说待会要出去一趟。早点去,不会耽搁你们睡觉吗? 很多年轻的业主每次电话,总是...
    别山举水阅读 4,375评论 58 55
  • 名画《星空》是梵高疯狂而天才的想象,绘本《星空》则是幾米孤独而美好的期望。对于由连环画陪伴长大的一代人来说,幾米的...
    亚理思多得阅读 548评论 0 0