引入VUE的方式（8种）

news/2024/4/28 23:04:33/文章来源:https://www.cnblogs.com/LIXI-/p/16636557.html

第一类：

1、本地引入

把vue的js文件下载下来引入

2、CDN引入

把vue.js网址引入

3、把vue.js文件放在项目文件夹src中引入项目然后webpack打包

4、编辑器直接生成cdn的方式

第二类：

5、自己构建vue的脚手架

/*
1.新建项目  alipay 
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配置:
*/
const path = require('path');
const {VueLoaderPlugin
} = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'production',watch: true,entry: './src/main.js',output: {filename: '[name].js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /\.vue$/,loader: 'vue-loader',}, ]},plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename: 'index.html'}),new VueLoaderPlugin(),],devServer: {open: true,port: 8080,hot: true,host: '192.168.1.1',（自己的ip）compress: true,},
}//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文件中
<body><div id="app"></div>
<body>

6、使用官方脚手架的方式来构建项目环境

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

7、可视化项目管理方式

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