vue2.0学习——使用webstorm创建一个vue项目
背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很吃力,好在功夫不负有心人,磕磕绊绊的也算入门了,现为自己vue的学习阶段做个小小的总结。vue2.0的基础知识的总结暂时不总结成文,带有时间时再说吧。
我使用的是webstorm来创建vue项目,前辈说用这个软件学习还是不错的,事实证明,确实不错。
一、webstorm的安装:
1、什么是webstorm
WebStorm是jetbrains公司旗下一款JavaScript 开发工具,和IntelliJ IDEA同源。
再多的,可以
2、webstorm安装
一位大神整理的webstorm安装教程,我是按照这个教程安装的。
https://blog.csdn.net/xunciy/article/details/77345663
二、node.js的安装
1、什么是node.js
Node.js是一个Javascript运行环境。
2、node.js安装
同样的,一位大神总结的安装教程,为了不占用c盘空间,在配置NODE_HOME的时候坎坷万分,不担心c盘空间的,不配置也可以,直接下载到c盘。
https://blog.csdn.net/xmzyjr123/article/details/79428611
3、安装完成node.js,npm也就安装完成了。
npm是node的包管理工具。
三、安装Git
https://blog.csdn.net/orange228/article/details/79365795——————————————————————————————————————————————————————
在做好如上资格步骤的下载时,我们的准备工作也就做好了。下面我门要创建vue项目了。
五、vue-cli
1、什么是vue-cli
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板。
2、怎么用呢?
我们首先我们要建一个储存webstorm项目的文件夹,我的命名是webstormproject。
进入到这个文件夹,右键,选择Git Bash Here。
输入命令行:npm install vue-cli -g(下载全局vue-cli)
等到下载完成后,输入命令行:vue init webpack myproject (myproject是项目名,我的项目名就叫myproject)
然后他会询问你一些问题:
①、Project name (myproject);项目名称(myproject)。(确定按enter,否按N)
②、 Project description (A Vue.js project);项目描述(一vue.js项目)。(随意输入一段简短介绍,用英文,不写直接回车也行)
③、Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N)
④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere;Vue公司的建立(使用箭头键)>运行时+编译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染功能是必需的其他地方。(按enter)
⑤、Install vue-router? (Y/n);安装的路由?(/ N)。(可安可不安,建议安装,因为项目肯定能用上)
⑥、Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,就要做好心理准备,除非你非常懂ESLint语法,要不就会处处报错,之前不明白的时候选择过一次,总之很烦,若想要挑战一下,下面这个网址会给你帮助的:https://cloud.tencent.com/developer/chapter/12618 建议N)
⑦、Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N)
⑧、Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)
⑨、should we run 'npm install' for you after the ogject has been created? ;(选择Yes,use NPM)
等待一会儿,项目就建好了。
输入命令:cd myproject 进入到项目文件中
输入命令: npm install 初始化安装依赖
输入命令: npm run dev 执行
选中http://localhost:8080,鼠标右键复制,在浏览器打开。看到欢迎页面。
我们打开项目文件夹,会看到给我们初始化的脚手架,项目文件的解析有时间再贴出来。现在使用命令会运行了,那么在会webstorm中怎么运行呢?
六、webstorm中运行vue项目。
打开webstrom——>open——>选择项目——>新窗口打开。
打开后如图操作
完成后,点击右上角绿色的小按钮,就启动了,启动完成,直接点击控制台的网址就进入到了欢迎页面。
ok!这篇文章就到这里啦。
---------------------
作者:weixin_40877388
来源:CSDN
原文:https://blog.csdn.net/weixin_40877388/article/details/80911934
版权声明:本文为博主原创文章,转载请附上博文链接!
vue2.0学习——使用webstorm创建一个vue项目相关推荐
- 前端--使用webstorm创建一个vue项目
一.webstorm的安装: 1.什么是webstorm WebStorm是jetbrains公司旗下一款JavaScript 开发工具,和IntelliJ IDEA同源. 再多的,可以 2.webs ...
- 使用webStorm创建一个vue项目
1.点击左上角[File]----[new]----[project] 2.选择项目存放地址,及确定项目名等信息 3.可能会弹出是否使用淘宝镜像站等设置,根据项目实际开发需求来选择即可. 4.项目创建 ...
- [vue] 从0到1自己构架一个vue项目,说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
[vue] 从0到1自己构架一个vue项目,说说有哪些步骤.哪些重要插件.目录结构你会怎么组织 1 项目类型 前端的项目目前来看主要分为小程序开发,H5页面开发.PC官网.后台管理系统开发.Nativ ...
- 使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
- 使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目 前言介绍 前期环境准备 开始创建项目 实例 交流 前言介绍 创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建 ...
- 安装Vue node 及 创建一个Vue 项目
安装Vue 和 node 及 创建一个Vue 项目 一 下载node.js安装包 1 下载资源包,然后安装 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成 3 检测P ...
- 从零开始创建一个vue项目 1
从零开始创建一个vue项目 创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
- 如何创建一个vue项目
首先要准备好node.js npm,vue-cli 创建一个vue项目,使用脚手架创建具体命令如下 vue init webpack 项目名称 然后回车 Project name 项目名称 ( ...
- Vue学习笔记:创建一个Vue实例
目录 1.访问Vue官网https://cn.vuejs.org,进入学习模块下的教程 2.创建页面index.html 3.通过script标签在head部分引入vue.js 4.在body部分创建 ...
最新文章
- [Contest20171109]函数(lipshitz)
- python标准库学习9
- Linux系统命令常用查询
- U3D SCENEMANAGER.LOADSCENE是半异步的
- 白话详细解读(一)-----GoogLeNet(Inception V1-Inception V3)
- java arraylist初始大小_Java - ArrayList默认初始值
- 贪心+构造 Codeforces Round #277 (Div. 2) C. Palindrome Transformation
- 计算机网络 时延、发送时延、传输时延、处理时延、排队时延、时延带宽积
- linux 卡在grub_浅析 GRUB 如何加载 Linux kernel
- 不是程序员,代码也不能太丑!python官方书写规范:任何人都该了解的 pep8
- COCOS2D-X 不反复随机数
- NJUPT南邮 | 离散数学_实验一
- 手绘漫画学习 素描自学视频
- 进入中国内地第31年的麦当劳 ,为什么还能不断吸引新消费人群?
- Conditional Likelihood Maximisation: A Unifying Framework for Information Theoretic Feature Selecti
- Android加载本地大Bitmap文件,解析出来的Bitmap是整张图片是黑色的
- vue js 复制div区域内容
- 【Python】为图片加上数字上标
- 洛谷 P2071 座位安排 (最大流 + 建图)
- python中selenium模块驱动谷歌详解
热门文章
- 故障网络连接故障排除,第2部分:基本网络命令
- 我的世界服务器兑换系统怎么做,Minecraft我的世界村民交易方法及兑换表格
- 软件磁盘阵列(Software RAID)介绍
- ios 内购开发,passbook,蓝牙
- 手把手教你接入快应用账号开发-客户端方式
- 微信服务号解决开启服务配置后自定义菜单失效的方法
- 发那科pmc地址分配_FANUC IO模块地址分配详解
- 深度学习必备三种基本绘图技能
- 人物画像————圆球转动效果
- php公众号自动回复链接,微信公众号自动回复超链接怎么添加-微信公众号添加自动回复超链接的方法 - 河东软件园...