使用vue-cli创建vue项目介绍

 更新时间:2022年01月23日 10:13:00   作者:累成一条狗  
这篇文章介绍了使用vue-cli创建vue项目的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1、什么是vue-cli

是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

2、全局安装vue-cli

(1)检查npm 版本,建议安装到最新版本。

【命令行查看版本号】
node -v
npm -v
【升级npm(可选操作)】
npm install -g npm

【修改为淘宝镜像(可选操作)】
npm config set registry "https://registry.npm.taobao.org"

(2)安装

【全局安装 webpack】
npm install webpack -g

【webpack 4.X 开始,需要安装 webpack-cli 依赖】
npm install webpack webpack-cli -g

【查看版本号】
webpack -v

【全局安装vue-cli】
npm install -g vue-cli

【查看版本号】
vue -V

注:
若出现“Unexpected end of JSON input while parsing near”错误,
命令行输入: npm cache clean --force

3、创建项目(命令行方式)

(1)创建一个文件保存的路径。比如:E:\vue\vue-demo

【命令行进入该目录】
cd E:\vue\vue-demo

【下载模板】
vue init webpack vue-demo

【进入交互页面,根据自己情况选择】
?Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我选的NPM

(2)安装成功后,进入项目目录

【命令行进入该目录】
cd E:\vue\vue-demo

【初始化项目】
 npm install
 
 【启动项目,根据package.json中的数据来启动】
 npm run serve
 
 【关闭项目】
 Ctrl + C
 
 【浏览器访问:】
http://localhost:8080/

【项目打包上线】
npm run build
将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可(比如tomcat的webapps目录下)。

注:
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js的 post

4、创建项目(图形界面方式)

若想使用vue的UI界面来创建项目,需将vue升级到 3.0以上的版本。

【下载vue最新版】
npm i -g @vue/cli        或者   cnpm install -g @vue/cli

【打开ui界面】
vue ui

点击创建项目

填写项目名(尽量小写,大写会自动转为小写),选择npm或其他包管理器。

选择默认即可。

等待创建项目。命令行会自动执行创建操作。

创建完毕。

其余操作同上,此处不再重复。

项目文件结构如下:

查看package.json,

可以使用npm run serve 来启动项目、或npm run build 来打包项目。

运行起来后,

到此这篇关于使用vue-cli创建vue项目的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue中计算属性computed和普通属性method的区别小结

    vue中计算属性computed和普通属性method的区别小结

    Vue.js中Computed和Methods是两种常用的数据处理方式,本文主要介绍了vue中计算属性computed和普通属性method的区别小结,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • Vue实现移动端左右滑动效果的方法

    Vue实现移动端左右滑动效果的方法

    最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,经过一番折腾,最终决定四月vue-touch。下面小编把实现代码分享给大家,感兴趣的朋友一起看看吧
    2018-11-11
  • 解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

    解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

    微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白。这篇文章主要介绍了决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) ,需要的朋友可以参考下
    2019-06-06
  • vuex中commit和dispatch的区别解析

    vuex中commit和dispatch的区别解析

    commit 和dispatch的区别在于commit是提交mutatious的同步操作,dispatch是分发actions的异步操作,本文重点给大家讲解vuex中commit和dispatch的区别,感兴趣的朋友一起看看吧
    2024-06-06
  • mpvue+vant app搭建微信小程序的方法步骤

    mpvue+vant app搭建微信小程序的方法步骤

    这篇文章主要介绍了mpvue+vant app搭建微信小程序的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 对vux点击事件的优化详解

    对vux点击事件的优化详解

    今天小编就为大家分享一篇对vux点击事件的优化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue3使用自定义指令实现el dialog拖拽功能示例详解

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

    这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue3进阶主题Composition API使用详解

    Vue3进阶主题Composition API使用详解

    这篇文章主要为大家介绍了Vue3进阶主题Composition API使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue项目实现m3u8流媒体播放详细图文教程

    vue项目实现m3u8流媒体播放详细图文教程

    m3u8是一种常用的视频流媒体格式,通常用于在Web上播放视频,这篇文章主要给大家介绍了关于vue项目实现m3u8流媒体播放的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue+echarts实现堆叠柱状图

    vue+echarts实现堆叠柱状图

    这篇文章主要为大家详细介绍了vue+echarts实现堆叠柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论