vue.js 入门学习笔记一
编程工具:VS code
前言:本文介绍了Vue的一些基础必备知识,如项目的标准目录解析,以及使用node.js集成的npm下载live-server服务运行Vue项目。以一个hello world带你入门Vue
1、先下载Vue.js 官网链接
tip:开发版本通常是在项目开发过程中使用,包含了完整的警告和调式模式,因此方便开发时进行调试。生产版本通常是在项目上线的时候使用,替换开发版本。
2、创建Vue项目及其目录结构
2.1 新建一个vue文件将其拖进vs code左侧资源管理器中
2.2 在Vue目录下创建如下文件目录,并将vue.js放进js文件夹
tip:assets文件夹下通常还会建css和js两个文件夹用来存放项目的css样式表和js文件,而assets在Linux和Unix下是不编译的,因此这里就加快了项目编译的速度。example文件夹通常用来存放HTML文件。index.html则相当于项目入口。
3、在index文件中添加如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>hello world!</h1>
<hr>
<div id="app">
{{mes}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
mes :'hell world!'
}
})
</script>
</body>
</html>
tip:新建index.html时没有快速生成HTML模块代码时,只需要在编程界面输入!(感叹号),按下tab键就能生成HTML默认代码。
4、安装node.js
运行Vue项目需要使用npm或者cnpm下载live-server,这里你可以单独去安装npm或者cnpm,但是我建议还是安装node.js,最新的node.js已经集成了npm,node.js是搞前端开发必须懂的。
tip:npm /cnpm是一种包管理工具。npm是服务器在国外,下载速度较慢,cnpm是淘宝镜像,速度快。
4.1 在官网下载node.js并安装 官网链接
安装完之后可以在cmd检测是否安装成功,看到版本号即为成功
node -v
5、回到vs code 打开终端 安装下载live-server。如下:
npm install -g live-server
6、启动live-server
在vs code终端输入如下代码:
live-server
没有意外的话会打开你的默认浏览器,显示你的index.html页面,如下
tip:我是有意外的那个,我输入 live-server 后提示如下错误,提示我“禁止运行脚本”
解决办法如下:
打开PowerShell输入如下代码即可:
(不要粘贴注释进去)
//检查是否被禁用,回复Restricted即为被禁用
get-ExecutionPolicy
//开启
set-ExecutionPolicy RemoteSigned
//输入上面一句会提示你是否执行,输入y即可
执行完之后回到vs code终端重新执行live-server即可成功自动跳转页面
补充:
通常新建一个项目后还会先初始化一下项目,写一下配置文件,写完之后会在项目根目录自动生成一个package.json文件。代码如下:
(执行这句代码时先停掉live-server服务)
npm init
执行这句代码会提示你输入一些配置信息,如项目名、git仓库、关键字、作者等。按照提示填写即可。