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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
javascript 回调函数详解
Nov 11 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 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
文章推荐系统(二)
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
php字符串截取的简单方法
2013/07/04 PHP
php实现水仙花数示例分享
2014/04/03 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php获取excel文件数据
2017/04/21 PHP
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python使用KNN算法手写体识别
2018/02/01 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
致100米运动员广播稿
2014/02/14 职场文书
消防安全员岗位职责
2014/03/10 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js