Vue——引入vue的方法

小猫瘦瘦

已于 2022-09-29 11:07:23 修改

阅读量5k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-09-28 21:12:11 首次发布

本文链接：https://blog.csdn.net/qq_52499745/article/details/127096248

版权

vue就是个很多js工具代码的js文件

1 引入vue的方式

1.1 第一类引入方式

①自己引入CDN

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
    <div id="app">{{msg}}</div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            }
        })
    </script>

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


    <div class="three">
        {{msg}}
    </div>
    <script src="./dist/main.js"></script>
//index.js
import Vue from "./Vue.js"
new Vue({
    el: ".three",
    data: {
        msg: "小猫~"
    }
})
vue.js需要在字节跳动静态资源公共库去copyvue2.0最高版本过来
//webpack.config.js
module.exports = {
    entry: "./index.js"
}

1.2 第二类引入方式

直接把vue的代码环境集成了然后开始在vue的代码环境中写项目,最终才经过webpack打包生成第一类方式

①自己构建vue的脚手架(面试):

用npm下载vue 引入到项目中然后webpack打包

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

webpack.config.js

//4.webpack.config.js配置:
const path = require('path');
// vue加载器
const {
    VueLoaderPlugin
} = require('vue-loader');

const HtmlWebpackPlugin = require('html-webpack-plugin'); //plugins插件
module.exports = {
    mode: 'production',//生成模式
    watch: true,//监听webpack是否配置项发生改变，若不发生改变就从内存去拿，改变则再构建一次再拿
    entry: './index.js',//入口
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    // 加载器
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        },]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: 'index.html',//生成的文件名
            inject: "body"
        }),
        new VueLoaderPlugin(),
    ],

    // 服务更新器
    devServer: {
        open: true,//是否自动打开浏览器
        port: 8080,
        hot: true,
        host: '127.0.0.1',  //主机名
        compress: true,    //启用gzip压缩
    },

}

Box.vue

<!-- 空标签 不会真实加载到页面上去 -->
<template>
    <div>{{msg}}</div>
</template>

<script type="text/javascript">
export default {
    data() {
        return {
            msg: "lmf"
        }
    }
}
</script>

index.js

import { createApp } from 'vue'
import Box from './Box.vue'
createApp(Box).mount('#box')

//7.模板html文件中
<body>
	<div id="app"></div>
<body>

启动项目（小黑窗里）npm run dev 或者npm run serve ( "serve": "webpack server --config webpack.config.js"看自己怎么定义的)

②使用官方脚手架的方式来构建项目环境(面试)

1. npm install @vue/cli -g

//下载官方脚手架到全局，集成webpack的环境，能生成webpack的这个软件就是脚手架

（vue -V ==>查看脚手架的版本）

2. vue create 项目名称创建项目

3. 接下来让你选择一些默认要生成的工具,不管直接回车

会选择插件，比如：([Vue 2]babel、eslint) 、 ([Vue 3]babel、eslint)

以及选择一些配置

4. 进入项目文件夹: cd 项目名称 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者
npm run build //生成的打包文件在dist中用于项目上线

注意：不要有中文路径

③ 可视化项目管理方式(面试）

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