webstorm+vue初始化项目的方法

 更新时间:2018年10月18日 15:23:52   作者:漠天515  
今天小编就为大家分享一篇webstorm+vue初始化项目的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue新项目准备:

1、安装nodejs,官网下载傻瓜安装

node -v 验证

2、npm包管理器,是集成在node中的,所以安装了node也就有了npm

npm -v 验证

3、安装cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org

(完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。)

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

npm install -g vue-cli

vue新项目构建:

1、初始化项目模板:

vue init webpack-simple yunshi-approve

或者

vue init webpack yunshi-approve

2、安装npm

cd yunshi-approve

3、安装项目所需要的依赖:

npm install 或 cnpm install

4、运行看效果:

npm run dev

介绍一下目录及其作用:

build:最终发布的代码的存放位置。

config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

node_modules:npm 加载的项目依赖模块。

src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

assets:放置一些图片,如logo等

components:目录里放的是一个组件文件,可以不用。

App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

main.js :项目的核心文件

static:静态资源目录,如图片、字体等。

test:初始测试目录,可删除

.XXXX文件:配置文件。

index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。

package.json:项目配置文件。

README.md:项目的说明文件。

以上这篇webstorm+vue初始化项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3+Element Plus实现动态标签页以及右键菜单功能

    Vue3+Element Plus实现动态标签页以及右键菜单功能

    这篇文章主要给大家介绍了关于Vue3+Element Plus实现动态标签页以及右键菜单功能的相关资料,Vue 3和Element Plus提供了一种简单的方法来实现侧边菜单栏与标签页之间的联动,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue+j简单的实现轮播效果,滚动公告,衔接

    vue+j简单的实现轮播效果,滚动公告,衔接

    这篇文章主要介绍了vue+j简单的实现轮播效果,滚动公告,衔接,文章围绕主题的相关资料展开详细的内容具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • 关于Vue 自定义指令实现元素拖动的详细代码

    关于Vue 自定义指令实现元素拖动的详细代码

    这篇文章主要介绍了Vue 自定义指令实现元素拖动,在使用自定义指令之前,先对自定义指令有一定的了解,主要从自定义指令定义范围,钩子函数方面入手,需要的朋友可以参考下
    2022-01-01
  • Vue实现裁切图片功能

    Vue实现裁切图片功能

    这篇文章主要为大家详细介绍了Vue实现裁切图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue vant中picker组件的使用

    vue vant中picker组件的使用

    这篇文章主要介绍了vue vant中picker组件的使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现axios图片上传功能

    vue实现axios图片上传功能

    这篇文章主要为大家详细介绍了vue实现axios图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • vue 使用自定义指令实现表单校验的方法

    vue 使用自定义指令实现表单校验的方法

    今天小编就为大家分享一篇vue 使用自定义指令实现表单校验的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中子组件不能修改父组件传来的Prop值的原因分析

    Vue中子组件不能修改父组件传来的Prop值的原因分析

    在Vue中,父子组件之间通过Prop和Event实现了数据的双向绑定,但是,Vue设计者为什么不允许子组件修改父组件传递的Prop呢,本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
    2023-06-06
  • element el-input directive数字进行控制

    element el-input directive数字进行控制

    本文介绍了vue使用directive 进行控制的方法,使用element开发的过程中遇到循环的数据只能输入数字,并且有不要小数点,有需要小数点的,就有一定的参考价值,有兴趣的可以了解一下
    2018-10-10
  • 浅析Vue中Virtual DOM和Diff原理及实现

    浅析Vue中Virtual DOM和Diff原理及实现

    这篇文章主要为大家详细介绍了Vue中Virtual DOM和Diff原理及实现的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-03-03

最新评论