如何创建一个Vue项目

打开cmd命令行,安装node(带贴图)

  • 步骤:打开node官网 https://nodejs.org/en/download/,进行下载安装,输入node -v,如果出现版本信息即表示安装成功。
  • 输入node -v若显示版本号即表示安装成功

安装淘宝镜像

安装vue-cli脚手架构建工具

  • 输入命令 npm install -g vue-cli,安装完成即可

1 直接使用webstorm创建,其他像idea类似

2 本地先创建项目

  • 新建一个项目文件夹,右击用命令行运行
  • 运行命令vue init webpack 项目名称(lmy)
在当前项目下运行
  • 出现项目名等信息时直接默认下一步
    -下面将会出现四个选项,除了install vue-router是yes而外,其他都是no,以免发生不必要的麻烦
  • 输入npm install安装依赖库
  • 输入npm run dev运行项目,即可成功

test1

vue 安装.png
clipboard.png

test2

clipboard (1).png
clipboard (2).png
clipboard (3).png
clipboard.png
Microsoft Windows [版本 10.0.17134.285]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\lenovo>node -v
v8.11.1

C:\Users\lenovo>npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\lenovo\AppData\Roaming\npm\vue-list -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\lenovo\AppData\Roaming\npm\vue -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\lenovo\AppData\Roaming\npm\vue-init -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 5 packages from 10 contributors, removed 20 packages and updated 85 packages in 116.155s


   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │      New major version of npm available! 5.6.0 -> 6.4.1       │
   │   Changelog: https://github.com/npm/npm/releases/tag/v6.4.1   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯


C:\Users\lenovo>d:

D:\>cd VueStudy

D:\VueStudy>vue init webpack my-album

? Project name my-album
? Project description A Vue.js project
? Author YEndless <895315416@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-album".


# Installing project dependencies ...
# ========================


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\VueStudy\my-album\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1132 packages from 657 contributors and audited 10615 packages in 208.946s
found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd my-album
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack



D:\VueStudy>被《无问西东》感动了。 不是因为它人物塑造得有多好,它讲故事的方式有多好,它的剪辑手法有多厉害。事实 上有很多地方人物的动机不明确,讲故事的手法有...^Z^Z
'被《无问西东》感动了。' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

D:\VueStudy>npm install
npm WARN saveError ENOENT: no such file or directory, open 'D:\VueStudy\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\VueStudy\package.json'
npm WARN VueStudy No description
npm WARN VueStudy No repository field.
npm WARN VueStudy No README data
npm WARN VueStudy No license field.

up to date in 1.621s
found 0 vulnerabilities


D:\VueStudy>cd my-album

D:\VueStudy\my-album>npm run dev

> my-album@1.0.0 dev D:\VueStudy\my-album
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 5371ms                                                                 09:17:15
 I  Your application is running here: http://localhost:8081

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

推荐阅读更多精彩内容

  • 打卡模板 姓名 刘丹 公司 扬州滋奇餐饮有限公司 【日精进打卡第90天】 【知~学习】 《六项精进》1遍 ...
    蛋蛋的蛋蛋丹阅读 475评论 0 0
  • 世界充满悲伤,心里渴望,却得不到的痛苦,刚遇到很以说话朋友,却突然远走他方,刚遇到有好感的女生,却看见和其...
    一只木蛋阅读 123评论 0 0
  • 2018-03-20 道盛哲学学习会)打卡第24天 姓名:严娜 部门:分水碶 组别:待定 【知~学习 诵读《活法》...
    NinaYanWellin阅读 129评论 0 0
  • 我,一个普通建筑高校毕业的屌丝。毕业后在上海一家小公司实习工作,刚去公司,就跟随公司一位老项目经理驻扎工地现场,我...
    A明星阅读 574评论 2 1
  • Android源码在Android Studio加载调试 以下的说明都是我参考别人的文章后的自己总结,权当给自己记...
    hongSirX阅读 745评论 0 1