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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
原生js实现放大镜特效
Mar 08 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
使用微信小程序开发弹出框应用实例详解
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常见的魔术方法详解
2014/12/25 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Python实现抢购IPhone手机
2018/02/07 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python for 循环获取index索引的方法
2019/02/01 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
企业党员个人自我评价
2014/09/20 职场文书
实习科室评语
2015/01/04 职场文书
五一晚会主持词
2015/07/01 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python