vue--1.vue开发环境集成、基础指令、属性绑定


<script src="./src/vue2.6.14.js"></script>
<body>
		<div id="app">
			{{message}}
		</div>
 
		<script>
			new Vue({
				el:"#app",
				data:{
					message:"hello word"
				}
			})
 
</body>

2）CDN引入

3）webpack打包

自己把vue.js文件放在项目文件夹中引入项目然后webpack打包

4）编辑器生成

HbuilderX 创建项目选择 vue项目普通模式

(2)第二类引入方式

5）自己打包配置加载器

1.新建一个项目

2.初始化配置文件:npm init -y

3.下载依赖:
npm i webpack@5.74.0 webpack-cli@4.10.0 vue-loader@17.0.0 @vue/compiler-sfc@3.2.37 webpack-dev-server@4.10.0 html-webpack-plugin@5.5.0 -D
npm i vue -S

4.配置webpack.config.js

5.项目配置文件 pakage.json文件中:
        scripts:{
                "dev": "webpack serve --config webpack.config.js"
        }

6.main.js文件:
        import { createApp } from 'vue'
        import App from './App.vue'
        createApp(App).mount('#app')
        document.body.innerHTML+="444"

7.模板html文件中




//然后就可以启动了:npm run dev

6）官方脚手架(重点)

1. cnpm install @vue/cli -g //下载官方脚手架
2. vue create app1 //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者
npm run build //生成的打包文件在dist中用于项目上线

7）官方脚手架(ui)

1. cnpm install @vue/cli -g
2. vue ui
3. 打开的界面中
4.创建项目==>填写项目名字,选择项目创建的目录点击创建
5.等待它下载所有配置文件完毕
6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改