vue-cli 3.X 安装 与 快速构建项目

首先简单说一下 vue-cli2.x 与 vue-cli3.x 的区别

(1) 3.x 新加入了 TypeScript 以及 PWA 的支持

(2) 部分命令发生了变化:

    下载安装  npm install -g vue@cli

    删除了vue list

    创建项目   vue create

    启动项目   npm run serve

(3) 默认项目目录结构也发生了变化:

    移除了配置文件目录,config 和 build 文件夹

    移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中

    在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

(4) 配置

    配置信息在根目录下 vue.config.js

vue-cli3.x 项目搭建

第一步.安装

卸载旧版本(如果事先安装了vue cli1.x或者vue cli2.x,要先卸载掉)

npm uninstall vue-cli -g

node版本要要求

You are using Node v6.11.0, but this version of vue-cli requires Node >=8.9.

安装Vue cli

npm install -g @vue/cli

( vue-cli2.x 是 npm install -g vue-cli )

查看Vue cli的版本

vue --version

第二步创建项目文件

vue create project-name

( vue-cli2.x 是 vue init webpack project-name )

第三步.选择快捷式安装配置

这里是 让你选的,第一个是默认配置,第二个是自己配置,这里选择最后一个

默认配置只有babel和eslint其他的都要自己另外再配置,所以我们选第二项手动配置

第四步.选择安装依赖

这里你可以自由选择用哪些配置

按上下键 选择哪一个,按空格键确定,A键是全选,

所有的都选择好后,按enter键进行下一步

第五步.是否使用路由的history模式

这里我建议选No,这样打包出来丢到服务器上可以直接使用了,

后期要用的话,也可以自己再开起来。

选yes的话需要服务器那边再进行设置

第六步 选择css预处理

les s和 sass可以自行选择

第七步.选择自动化代码格式化检测

第八步.是否保存刚才的配置

选择确定后你下次再创建新项目 就有你以前选择的配置了,不用重新再配置一遍了

第九步.配置文件放哪

第一个是放在单独的文件配置

第二个是放在package.json文件里

通常我们会选择独立放置,让package.json干净些

第十步.是否将以上这些将此保存为未来项目的预配置

第十一步. 回车下载

第十二步.启动项目

npm run serve

( vue-cli2.x 是 npm run dev )

提示

如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具

npm install -g @vue/cli-init

vue init webpack my-project

本人还是Vue的小学生, 以上如有问题或不妥之处还请多多指教 ( 474529914@qq.com ) 

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