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初始化项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中使用jeecg进行前后端联调方式

    vue中使用jeecg进行前后端联调方式

    这篇文章主要介绍了vue中使用jeecg进行前后端联调方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue结合AntV G2的使用踩坑记录

    vue结合AntV G2的使用踩坑记录

    这篇文章主要介绍了vue结合AntV G2的使用踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 记一次vue去除#问题处理经过小结

    记一次vue去除#问题处理经过小结

    这篇文章主要介绍了vue去除#问题处理经过,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue 图片路径 “@/assets“ 报错问题及解决

    vue 图片路径 “@/assets“ 报错问题及解决

    这篇文章主要介绍了vue 图片路径 “@/assets“ 报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Mixin混入分发Vue组件可复用功能基础示例

    Mixin混入分发Vue组件可复用功能基础示例

    这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue之字符串、数组之间的相互转换方式

    vue之字符串、数组之间的相互转换方式

    这篇文章主要介绍了vue之字符串、数组之间的相互转换方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vite+vue3中如何使用router

    vite+vue3中如何使用router

    这篇文章主要介绍了vite+vue3中如何使用router问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue parseHTML 函数拿到返回值后的处理源码解析

    vue parseHTML 函数拿到返回值后的处理源码解析

    这篇文章主要为大家介绍了vue parseHTML 函数拿到返回值后的处理源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue中this.$nextTick()方法的使用及代码示例

    Vue中this.$nextTick()方法的使用及代码示例

    $nextTick()是Vue.js框架中的一个方法,它主要用于DOM操作,当我们修改Vue组件中的数据时,Vue.js会在下次事件循环前自动更新视图,并异步执行$nextTick()中的回调函数,本文主要介绍了Vue中this.$nextTick()方法的使用及代码示例,需要的朋友可以参考下
    2023-05-05
  • Vue使用Three.js创建交互式3D场景的全过程

    Vue使用Three.js创建交互式3D场景的全过程

    在现代Web开发中,通过在页面中嵌入3D场景,可以为用户提供更加丰富和交互性的体验,Three.js是一款强大的3D JavaScript库,它简化了在浏览器中创建复杂3D场景的过程,本文将介绍如何在Vue中使用Three.js,创建一个简单的交互式3D场景,需要的朋友可以参考下
    2023-11-11

最新评论