单页使用与脚手架使用
单页使用，在本页需要导入vue.js文件
示例1--部分
<body>
<div id="app">
<h2>{{name}}</h2>
</div>
<!-- 1. 导入Vue的开发包 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./lib/vue.js"></script>
<script type="text/javascript">
// 创建一个Vue实例
var app = new Vue({
el: "#app", // 要渲染的的元素
data: { // 在data属性中存放el需要使用到的数据
name: "Vue快速使用"// 将msg渲染到页面上
}
})
</script>
</body>
示例2------demo1.html--完整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 1 绑定输入框中的值 2 绑定data当中的msg -->
<input type="text" v-model="msg"><br>
<!-- 插值表达式 -->
{{msg}}
<hr>
<!-- 事件处理 -->
<button v-on:click="num++">点击</button>
{{num}}
<hr>
<button v-on:click="add">点击</button>
{{num1}}
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"",
num:0,
num1:1
},
methods:{
add(){
this.num1++
}
}
})
</script>
</html>脚手架使用
第一步：
1.安装各种环境（建议网上教程找一下，可以找node.js安装，npm 安装，vue-cil安装）
2.检查是否安装成功（很重要）
打开终端cmd：快捷键win+R，输入cmd，按下enter
（以下示例版本适用本篇，版本不同可能导致错误）
（以下版本配置如果创建vue3项目就报错，创建项目请注意）
输入以下三行命令
（没出现版本号的说明没安装上）
（或者换一个路径执行后没有版本号的说明没有全局安装）
C:\Users\action>node -v
v12.22.12
C:\Users\action>npm -v
6.14.16
C:\Users\action>vue --version
@vue/cli 5.0.8（忽略本条，此处记录一个解决办法）版本不同导致报错提示：
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
在这行下面还有很迷惑的：
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo2@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo2@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! D:\chengxu\node\node-v12.22.12-win-x64\node_cache\_logs\2024-05-15T03_33_26_768Z-debug.log
（以为是没清缓存，清半天就这三行命令我一直执行，结果才看到是版本错误）
npm cache clean --force
npm install
npm run serveso 最后创建项目直接选了vue2项目（老师要求vue2）
如果需要版本升级（创建vue3项目的情况）
node npm vue版本一起更换，至少确保对应，否则报错
第二步：创建项目
注：确保环境全局安装（没有的话，在install 时都加上 -g）
1.选择一个文件夹，使用管理员权限打开终端命令行
ps：文件夹可以不为空（但是尽量为空（个人认为是比较良好的习惯？？
再ps：（demo1为项目名字，可以自定义，但是尽量英文
vue create demo12.执行后，选择 ?行的蓝绿色字这些
等待创建ing，出现success就是创建项目成功
3.运行项目
进入项目根目录（注意：是在刚刚创建的项目名字的目录下）
cd demo3执行运行项目的命令
npm run serve
按住ctrl点击下图中的8080就可以访问，点不了的直接在浏览器输入也行
进入页面有一个默认首页，这页是在App.vue文件下的，可以删掉，自己写页面
第三步：关于写项目
启动之后，修改代码不用重启，保证修改的文件有保存就行
页面以及样式等写在App.vue（等系列.vue文件）
（components文件夹专门用于存放组件，详情参照组件化开发）
（本人对于组件化开发的理解：在components注册的组件可以直接用于页面中，同时涉及父子组件之间传值以及数据双向绑定）
关于页面结构
3602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
