使用vue-cli webpack 快速搭建项目的代码

 更新时间:2018年11月21日 09:44:27   作者:color_小浣熊  
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

一、安装vue

npm install vue -g

二、用vue-cli快速搭建项目

//全局安装vue-cli
npm install install -g vue-cli
//创建一个基于webpack模板的项目
vue init webpack [demoname]
? Project name (xxx)
? Project name xxxx
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (xj <x@xm.com>)
? Author xx <x@xlm.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
  vue-cli · Generated "paixiaoyang_backstage".
# Installing project dependencies ...
# ========================
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes andnew features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> uglifyjs-webpack-plugin@0.4.6 postinstall F:\work\paixiaoyang_backstage\paixiaoyang_backstage\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 1127 packages from 646 contributors and audited 10642 packages in 157.659s
found 2 vulnerabilities (1 moderate, 1 high)
 run `npm audit fix` to fix them, or `npm audit` for details
# Project initialization finished!
# ========================
To get started:
 cd xxxx
 npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack

三、进入项目运行

cd xxxx
//运行
npm run dev


四、在浏览器上打开localhost:8080

总结

以上所述是小编给大家介绍的使用vue-cli webpack 快速搭建项目的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue 如何设置背景颜色及透明度

    vue 如何设置背景颜色及透明度

    这篇文章主要介绍了vue 设置背景颜色及透明度的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • vue+Minio实现多文件进度上传的详细步骤

    vue+Minio实现多文件进度上传的详细步骤

    这篇文章主要给大家介绍了关于如何利用vue+Minio实现多文件进度上传的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    vue3使用自定义指令实现el dialog拖拽功能示例详解

    这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue页面切换项目实现转场动画的方法

    vue页面切换项目实现转场动画的方法

    这篇文章主要介绍了vue页面切换项目实现转场动画的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vant自定义引入iconfont图标及字体的方法步骤

    vant自定义引入iconfont图标及字体的方法步骤

    因为vantUI给的图标非常少,为了满足自己的需求,就应该找到一种方法来向vant添加自己自定义的图标,对于自定义图标我第一时间想到的就是阿里的iconfont矢量图库,这篇文章主要给大家介绍了关于vant自定义引入iconfont图标及字体的方法步骤,需要的朋友可以参考下
    2023-09-09
  • vue excel上传预览和table内容下载到excel文件中

    vue excel上传预览和table内容下载到excel文件中

    这篇文章主要介绍了vue excel上传预览和table内容下载到excel文件中,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue制作点击切换图片效果的详细思路与步骤

    vue制作点击切换图片效果的详细思路与步骤

    这篇文章主要给大家介绍了关于vue制作点击切换图片效果的详细思路与步骤,图片切换是一个很经典的Vue入门学习案例,在你学习完一些基本的v-指令后,你可以尝试去写一个简单的demo去巩固和熟悉这些指令的使用方法,需要的朋友可以参考下
    2023-11-11
  • vue实现移动端项目多行文本溢出省略

    vue实现移动端项目多行文本溢出省略

    这篇文章主要介绍了vue实现移动端项目多行文本溢出省略功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • vue实现列表垂直无缝滚动

    vue实现列表垂直无缝滚动

    这篇文章主要为大家详细介绍了vue实现列表垂直无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论