美文网首页
如何创建一个Vue项目

如何创建一个Vue项目

作者: qqqywy | 来源:发表于2018-10-24 23:31 被阅读0次

打开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

相关文章

网友评论

      本文标题:如何创建一个Vue项目

      本文链接:https://www.haomeiwen.com/subject/ncvftqtx.html