第一个vue.js项目
写在前面
本文主要给刚刚接触前端或者vue.js
的同学,旨在可以通过本文能够顺利运行起一个vue工程!
零、环境搭建
首先安装node及npm(已经安装过的自动跳过),打开node官网:
不管是windows还是mac,是英文还是中文,都差不多一个样。
LTS
是稳定版,另一个是最新版,区别就是新版的可能有一些新的功能,但可能不太稳定,随便点一个就可以(不过我都是装最新版?)。
接着点击右边的最新版,就会下载一个安装包,接着找到下载位置点击安装。
没下载成功应该是网络问题,重新下载就好了。
另外,安装node时会自动安装npm,所以暂时不需要再手动安装npm,接着就是傻瓜式操作,一路点击“继续”、“同意”和“安装”之类的按钮,然后会提示安装成功。
我们也可以不去管这个提示(或者没有提示的),最后只要用命令行测试一下就知道是否安装成功:
node -v
npm -v
如果得到下面的结果就说明安装成功了:
至此,node环境已经搭建完毕!
到这一步也很简单,暂不需要手动配置环境变量之类的东西。
一、安装脚手架——vue-cli
为了避免从零构建整个项目所浪费的成本,vue官方提供了一个直接生成基础工程的脚手架——vue-cli,对初学者上手也比较快,接着安装脚手架工具:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装成功大概是这样(类似+ @vue/cli@3.0.4
就是安装成功了):
yarn
跟npm
一样,也是一个包管理工具,直接使用yarn
报错的话,可以先安装一下,官网提供的安装方法。
如果觉得npm
速度慢的话可以将改成国内的淘宝npm镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后就可以使用cnpm install
进行相关依赖的安装(不过一般我是不用cnpm的
)。
二、初始化工程
在vue-cli3.0
开始,提供了一个图形化的界面,相比之前的命令行初始化更加直观,操作更方便,在工程启动后的数据分析以及状态管理也更加清楚。
如果上面步骤都没有问题,运行这个命令在本地启动8000
端口并自动打开浏览器:
vue ui
浏览器打开的效果是这样的:
接着依次点击“创建”—>“在此创建新项目”,然后出现基础信息配置页面:
接着在“项目文件夹”的输入框下面输入项目名(如:my-app
),然后点击“下一步”,到如下界面:
然后点击“创建项目”,接着就是一段等待时间,用于创建自动创建项目以及安装相关依赖。
这里可以先选择默认的,因为后续都是可以修改的。
成功之后就会看到这个界面:
接着如下图,依次点击“任务”->“serve”->“运行”:
大概几秒的时间就会启动成功,右侧面板会变成大概这样,会显示本次编译的一下信息:
如果上面的面板提示“编译成功”或者“success”等类似状态就表示项目启动成功,接着就可以用浏览器打开http://localhost:8080
:
三、修改项目
项目创建成功,接着如果修改呢?
在初始化工程的时候会有文件夹的路径,在自己的文件夹下好到对应的文件夹,例如我的叫my-app
:
接着就直接通过编辑器打开文件夹,然后找到对应的文件进行修改、保存即可。
写在后面
本文没什么代码,只是想对刚接触前端及vue.js
的一个基本指南,代码也不同步到github上了;
对细节、原理以及vue.js
语法不做详细说明,只想能顺利的跑起来一个vue.js
的Hello World!
第一个vue.js项目相关推荐
- vue怎么运行html,怎样运行一个vue.js项目
怎样运行一个vue.js项目? 下载并安装node,安装过程很简单,一路"下一步"就可以了,安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明 ...
- vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目?
1,新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端:查看 –> 集成终端 或者直接按 ctrl+\ ` 如果没有安装vue-cli,在终端输入: ...
- vue.js 项目打包APP应用包
vue.js 项目打包APP应用 在hbuilderx编辑器使用的,vue.js 项目打包APP应用 创建一个vue.js项目,写好移动端 vue.js 框架,APP项目完成. 1.在config配置 ...
- Vue CLI 脚手架详解:快速构建 Vue.js 项目的利器
目录 一.安装和创建项目 二.项目结构 三.开发和构建 四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
- 多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
- 用vscode实现vue.js项目的一个完整过程
1.新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端:查看 –> 集成终端 或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
- 构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
- Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
老文章了,目前用el-input v-model.number就能解决 很简单的操作,不知道当初在做什么,下文请直接忽略- Vue.JS项目中v-model导致输入框中number类型值自动转换成st ...
- Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
最新文章
- Python爱好者周知:Scikit-Learn中文文档正式发布
- python文件输入和输出
- 关于java.math.BigDecimal的操作(亲测)
- 1001 Calculate a + b
- 使用extern C改善显式调用dll
- Alsa里面恶心的DAPM
- threejs 用 ExtrudeGeometry 画管线
- Vue中message.split().reverse().join()函数用法
- github开源库(三)
- vue 如何处理两个组件异步问题_Vue异步组件使用详解
- 怎么恢复php格式关联,SCN与数据恢复关联
- wx.checkjsapi是写在config里面吗_理解了异地恋,就理解如何配置交换机,你理解了吗?...
- python系统路径_python中os模块简单了解(系统命令和路径的获取)
- 最新服务器处理器天梯,服务器CPU性能排行榜天梯图(双路/三路/四路)
- 前端对页面中的 checked 选中状态的展示
- 大数据 客户标签体系_大数据标签体系建立
- POE——POE供电详解
- fitnesse java_Fitnesse测试系列--安装及环境配置
- 国产防盗版加密芯片安全性分析
- 您需要了解的跨阻放大器——第1部分
热门文章
- KUDU--秒级查询的数据仓库
- 【Gamma】Scrum Meeting 9
- 数据库性能优化—数据库连接池
- Flutter混合开发:Android中如何启动Flutter
- 异步编程异常和死锁处理
- Zookeeper运维问题集锦
- Linux Ubuntu安装sogou中文输入法
- Spring Cloud基础教程
- node nightmare 网页自动化测试 sample
- 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换...