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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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进行MySQL删除记录操作代码
2008/06/07 PHP
php中使用url传递数组的方法
2015/02/11 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
2014年镇党建工作汇报材料
2014/11/02 职场文书
诚信教育主题班会
2015/08/13 职场文书
运动会广播稿300字
2015/08/19 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
DE1103使用报告
2022/04/05 无线电