1.VUE 安装以及vue.js下的第一个hello world

2024-05-12 17:13:19

1.进入官方网站下载最新的vue.js

官方网站有两个文件可供选择：

开发者版本（vue.js）:包完整的警告和调试模式
发布版本(vue.min.js)：删除了警告，进行了压缩

网址：https://cn.vuejs.org/v2/guide/installation.html

2.项目结构搭建

本项目用的集成开发工具为Visual Studio Code，也可选择其他开发工具，选择vs code的原因是因为工具直接具有终端输入功能。

创建项目文件夹（eg：VUE）
在工程下创建assets文件夹，将两个版本的vue.js拷贝进js子文件夹。如下图

创建工作目录example
创建index.html（启动页面）

至此安装目录已经建完，如下图：

说明：assets文件夹在linux和unix环境下是不编译的。

3.安装启动服务

目录建完之后，需要安装启动服务。

安装启动服务的前提是已经安装了node.js，有关node.js的详细安装请查看菜鸟教程的node.js的安装教程，网址http://www.runoob.com/nodejs/nodejs-install-setup.html

安装启动服务命令：cnpm install -g live-server

初始化前端项目：npm init --------------------------------------（进入配置项目阶段）

name:(Vue):输入你想要的项目名，项目名必须为小写字母开头

version:(1.0.0)：输入要定义的版本号

description:输入项目描述

entry point:(index.html)：输入入口文件

test command:

git repository:输入Git仓库地址

keywords:输入项目关键词

author:输入作者名

is this ok?(yes)：回车结束

至此配置完成，在项目中生成package.json文件，方便以后进行包的管理

4.项目中引入vue

index.html:

在<head>标签下，输入<script></script>,src存放之前存放vue.js的文件目录

具体实例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue.js实例</title><script type="text/javascript" src="assets/js/vue.js"></script>
</head><body><div id='ele'>{{msg}}
</div><script>new Vue({el:'#ele',data:{msg:"hello vue.js"}})
</script></body></html>

启动server：

在控制台命令下输入live-server

则网页打开，显示

在控制台下输入ctrc+c,即可结束服务。

1.VUE 安装以及vue.js下的第一个hello world相关推荐

Vue 安装谷歌浏览器vue开发插件
引用地址: 前置配置文章插件安装地址 vue开发插件地址启动项目出现vue 安装完成
vue 安装php,vue中使用openinstall
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 1.在html的head中引入外部cdn链接 2. 在webpack.base.conf.js中配置 externals: { OpenInstall: ...
Vue系列（2）：Vue 安装
前言:关于页面上的知识点,如有侵权,请看这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好大家都知道,学 Vue 最好还是去官网学,官网写 ...
vue脚手架依赖包安装不成功_Windows下vue-cli的搭建
1.vue-cli 是Vue的脚手架工具,windows 下要安装 vue-cli,必须先安装 node.js,才能使用npm. 在cmd里输入node -v,若能出现版本号,则表示已经安装,若不能, ...
一步一步带你安装Node.js并创建第一个Vue项目
Node.js官方链接:下载 | Node.js 中文网下载安装包,一路next直到安装成功,它默认配置好了环境变量,然后以管理员的身份运行DOS命令查看Node.js版本号 node -v 查看 ...
Atom 编辑器安装 linter-eslint 插件，并配置使其支持 vue 文件中的 js 格式校验
安装linter-eslint插件方式有如下几种. 1. 最简单的方式就是点击 File -Settings -Install ,搜索linter-eslint ,安装即可 2. # 进入atom ...
vue安装Postcss_Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】
前言: 看了一些国外的关于介绍flask和vue的前后端分离的文章,但没看到比较通俗易懂,代码完善的,直到昨天看到一篇新出的文章,而且内容非常棒,所以翻译过来,供大家一起学习. 原文来自Develop ...
在vue.config.js下配置别名alias
在vue.config.js下配置别名alias module.exports = {configureWebpack: {resolve: {alias: {'assets': '@/assets' ...
【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
Vue3 安装在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...
在谷歌浏览器安装了Vue.js devtools发现不能用显示Vue.js is not detected
在谷歌浏览器安装了Vue.js devtools发现不能用显示Vue.js is not detected 学习vue框架的时候,在谷歌浏览器安装了Vue.js devtools插件,写了一个入门的h ...

最新文章

热门文章