Vue——引入vue的方法

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

1 引入vue的方式

1.1 第一类引入方式

①自己引入CDN

    
{{msg}}
    

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

    

        {{msg}}
    
    

//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 [email protected] [email protected] [email protected] @vue/[email protected] [email protected]  [email protected] -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

index.js

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

//7.模板html文件中

	

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