Vue学習-構築環境

最初にHbuilderを使用して最初のVueプロジェクトを実行しました

手順:
1。新しいVueプロジェクトを作成します
ここに画像の説明を挿入
2. Vueプロジェクト。作成後、新しく作成したプロジェクトを右クリックしてindex.htmlファイルを作成します
ここに画像の説明を挿入
3. Vueの公式Webサイトで、Vue.jsファイルをダウンロードして配置します使いやすいように、srcパッケージの下にVueプロジェクトを作成しますここに画像の説明を挿入
。4。最初のVueコードを記述します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello vue</title>
		
		<script src="./src/vue.js" type="text/javascript" charset="UTF-8"></script> 
		<!-- 引入vue.js  要不然无法运行-->
	</head>
	<body>
		
		<div id="demo">
			{
    
    {
    
    message}}
			
		</div>
		
	<script type="text/javascript">
		
		var demo=new Vue(
		{
    
    
			el:'#demo',
			data:{
    
    
				message:'hello vue!!!'
			}
			
		}
		
		);
		
	</script>
	
	</body>
</html>

保存して実行します。

ここに画像の説明を挿入


走り抜けた!

おすすめ

転載: blog.csdn.net/fxwentian/article/details/114305668