vue的引入方式
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为:./ 然后点保存修改。1.自己构建vue的脚手架(面试): 用npm下载vue 引入到项目中 然后webpack打包。4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端。npm run build //生成的打包
第一类引入方式
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: {
// ...
}
};
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)