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

您可能有感兴趣的文章
webstorm建立vue-cli脚手架的傻瓜式好代码教程

WebStorm无法正确识别Vue3组合式API的如何解决方案

如何如何使用Webstorm和Chrome来调试Vue项目

vue: WebStorm设置快速编译运行的方法

webstorm中vue语法的支持详解