vue的引入方式

最新推荐文章于 2024-05-27 09:57:03 发布

joy_zhuo_

最新推荐文章于 2024-05-27 09:57:03 发布

阅读量8.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/joy_zhuo_/article/details/126629892

版权

第一类引入方式

1.自己引入cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

import Vue from './vue.js'
new Vue({
		el: "#app",
		data: {
			msg: "hello",
			age:"18"
		}
})

3.编辑器直接生成cdn的方式

HbuilderX 创建项目 选择 vue项目普通模式

第二类引入方式

1.自己构建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 
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.2.60',
		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>
    
//然后就可以启动了:npm run dev  但是 但是 但是  修改了之后 会等很久才刷新  因为没有配置优化 所以很卡  官方的脚手架配置的特别好  就反应很快

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

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

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

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

4.编辑器直接生成脚手架环境的方式 (做项目推荐)

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

//注意:代码中回车或者空格导致的报错禁用eslint启用严格模式来加载我们的代码,项目下新建vue.config.js文件:

module.exports = {
lintOnSave: false
}

//注意:npm run build打包后生成的引入文件的路径不对解决方案:

//第1种.手动把路径的斜杠删除

//第2种.在根目录下新建vue.config.js

复制代码:

module.exports = {
    /** 区分打包环境与开发环境
     * process.env.NODE_ENV==='production'  (打包环境)
     * process.env.NODE_ENV==='development' (开发环境)
     * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
     */

    // 项目部署的基础路径

    // 我们默认假设你的应用将会部署在域名的根部,

    // 例如 https://www.my-app.com/

    // 如果你的应用部署在一个子路径下，那么你需要在这里

    // 指定子路径。比如将你的应用部署在

    // https://www.foobar.com/my-app/

    // 那么将这个值改为 '/my-app/'

    baseUrl: "./", // 构建好的文件输出到哪里

    outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败

    lintOnSave: false, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

    runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖

    transpileDependencies: [
        /* string or regex */
    ], // 是否为生产环境构建生成sourceMap?

    productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

    chainWebpack: () => {},

    configureWebpack: () => {}, // CSS 相关选项

    css: {
        // 将组件内部的css提取到一个单独的css文件（只用在生产环境）

        // 也可以是传递给 extract-text-webpack-plugin 的选项对象

        extract: true, // 允许生成 CSS source maps?

        sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }

        loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.

        modules: false
    }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores

    parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

    pwa: {}, // configure webpack-dev-server behavior

    devServer: {
        open: process.platform === "darwin",

        disableHostCheck: false,

        host: "192.168.2.57",

        port: 9000,

        https: false,

        hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

        proxy: null // string | Object

        // before: app => {}
    }, // 第三方插件配置

    pluginOptions: {
        // ...
    }
};

joy_zhuo_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue的引入方式

7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改。1.自己构建vue的脚手架(面试): 用npm下载vue 引入到项目中然后webpack打包。4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端。npm run build //生成的打包文件在dist中用于项目上线。4.创建项目==>填写项目名字,选择项目创建的目录点击创建。...
复制链接

扫一扫