vue cli3--创建通用模版

2024-04-28 08:35:23

1. 在package.json中，写入脚本

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"temp": "node util/template.js"

},

2.在util/template文件夹下，创建通用模版。

main.html：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta name="format-detection" content="telephone=no, email=no">

<meta name="W_design" content="750">

<meta name="WT.pagetitle" content=""></meta>

<meta name="WT.pageID" content=""></meta>

<title></title>

<script src="./static/base/js/flexible.js"></script>

</head>

<body>

<noscript>

<strong>浏览器版本过低，无法支持此页面，请升级页面；</strong>

</noscript>

<div id="app"></div>

</body>

</html>

----------------------

main.js:

import Vue from 'vue'

import App from './main.vue'

Vue.config.productionTip = false

new Vue({

render: h => h(App),

}).$mount('#app')

---------------------

main.vue:

<template>

<div class="app">

</div>

</template>

<script>

export default {

data() {

return {

};

},

methods: {

},

components: {

}

};

</script>

<style type="text/css" lang="scss" scoped>

</style>

-------------------

3. 在util路径下，创建template.js执行脚本

/**

* 通过模版创建页面

*/

const path = require('path');

const fs = require('fs');

const readlineSync = require('readline-sync');

// 输入需要创建的页面名称

let pageName = readlineSync.question('enter your page name: ');

// 目标模块目录的地址

const pagePath = path.resolve(__dirname, '../src/pages', pageName);

console.log('pagePath',pagePath)

// 模板地址

const templatePath = path.resolve(__dirname, '../util/template');

console.log('templatePath',templatePath)

// 判断目标页面目录是否存在

if (fs.existsSync(pagePath)) {

// 存在指定页面，提示错误并退出程序

console.error(`${pageName} page is exists`)

process.exit()

}

// 创建目标页面目录

fs.mkdirSync(pagePath);

// 需要复制的文件

const copyFiles = ['main.html', 'main.js', 'main.vue'];

const copy = (source) => {

for (const item of source) {

// 读取模板中对应文件的内容

let fileText = fs.readFileSync(path.join(templatePath, item));

// 写入到目标页面中对于的文件中

fs.writeFileSync(path.join(pagePath, item), fileText)

}

}

// 执行复制操作

copy(copyFiles);

console.log('Successful page creation!');

--------------------

/**

* 通过模版创建页面

*/

const path = require('path');

const fs = require('fs');

const readlineSync = require('readline-sync');

// 输入需要创建的页面名称

let pageName = readlineSync.question('enter your page name: ');

// 目标模块目录的地址

const pagePath = path.resolve(__dirname, '../src/pages', pageName);

console.log('pagePath',pagePath)

// 模板地址

const templatePath = path.resolve(__dirname, '../util/template');

console.log('templatePath',templatePath)

// 判断目标页面目录是否存在

if (fs.existsSync(pagePath)) {

// 存在指定页面，提示错误并退出程序

console.error(`${pageName} page is exists`)

process.exit()

}

// 创建目标页面目录

fs.mkdirSync(pagePath);

// 需要复制的文件

const copyFiles = ['main.html', 'main.js', 'main.vue'];

const copy = (source) => {

for (const item of source) {

// 读取模板中对应文件的内容

let fileText = fs.readFileSync(path.join(templatePath, item));

// 写入到目标页面中对于的文件中

fs.writeFileSync(path.join(pagePath, item), fileText)

}

}

// 执行复制操作

copy(copyFiles);

console.log('Successful page creation!');

转载于:https://www.cnblogs.com/Super-scarlett/p/11046923.html

vue cli3--创建通用模版相关推荐

Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
一.问题描述 Vue CLI3打包上线后的代码使用IE11打开后是空白的,控制台报错: SCRIPT1003: 缺少 ':' app.js (304501,83045) 其他浏览器打开没问题,问题定位 ...
linux 使用ssr客户端_【第一期】基于 @vue/cli3 与 koa 创建 ssr 工程
什么是基于同构代码的 SSR 服务(Server-side rendering based on isomorphic code) 首先,我们需要先明白什么是 spa (single page app ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
vue cli3 绑定域名_使用CLI设置WildFly绑定地址并关闭
vue cli3 绑定域名仅使用命令行参数将WildFly绑定到主机名/ IP上非常容易. 我有一个简单的GNU / Linux盒子,可以用它玩各种东西,其中之一就是WildFly. 我使用以下命令 ...
软件需求规格说明书通用模版_通用需求挑战和机遇
软件需求规格说明书通用模版 When developing applications there will be requirements that are needed on more than o ...
Vue cli3使用jQuery控件
背景介绍由于历史遗留问题需要使用之前基于jQuery的代码,其中还用到了一个基于jQuery的多选控件,环境是vue cli3 导入并配置jQuery 首先通过npm导入jQuery npm ins ...
Vue CLI3 基本使用配置；
Vue CLI3 开始安装: npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目: vue create my-project ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
公司项目vue cli2升级到vue cli3
背景: 公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动 ...

最新文章

热门文章