webstorm+vue初始化项目的方法


Posted in Javascript onOctober 18, 2018

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

Javascript 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 #Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 #Javascript
vue2.0 路由模式mode="history"的作用
Oct 18 #Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 #Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 #Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 #Javascript
vue中导出Excel表格的实现代码
Oct 18 #Javascript
You might like
认识并使用PHP超级全局变量
2010/01/26 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
Javascript基础教程之if条件语句
2015/01/18 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
nodeJS微信分享
2017/12/20 NodeJs
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python统计字符的个数代码实例
2020/02/07 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
大学生社团活动总结
2014/04/26 职场文书
先进员工获奖感言
2014/08/14 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
导游词之岳阳楼
2019/09/25 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
css3 文字断裂效果
2022/04/22 HTML / CSS