Vue——引入vue的方法
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打包
<!--index.html--> <!-- 引用打包后dist里的main.js进行渲染 --> <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.jsimport { 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文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改
zhug_xiaoniao: 你好, 切换的时候偶尔navaigator 视图不会变化, 有遇到过吗
凉拌香菜卷: 哈喽,你好我想问一下openseadragon它这个图片层级有什么规律嘛,我这个图片路径放进去展示出来图片是乱的
01程序猿: 因为作者自己都不知道从哪cv过来的
fys1903467244: 为什么按照第一种方法写了二维码不出来呢
华清远见—蒋老师: 理解的很到位哦!