Vue2：引入VUE的方式（8种）

第一类：

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文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改

8、编辑器直接生成脚手架环境的方式

HbuilderX 创建项目选择 vue项目 vue-cli默认模板
然后要:npm i
再:npm run serve

posted on 2022-08-29 21:09 香香鲲阅读(2443) 评论(0) 编辑收藏举报