vue cli3--建立通用模版
1. 在package.json中，寫入腳本css
"scripts": {html
"serve": "vue-cli-service serve",vue
"build": "vue-cli-service build",node
"temp": "node util/template.js"web
},vue-cli
2.在util/template文件夾下，建立通用模版。json
main.html：瀏覽器
<!DOCTYPE html>app
<html lang="en">flex
<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">
<!-- 頁面 page id start-->
<meta name="WT.pagetitle" content=""></meta>
<meta name="WT.pageID" content=""></meta>
<!-- 頁面 page id end-->
<title></title>
<script src="./static/base/js/flexible.js"></script>
</head>
<body>
<noscript>
<strong>瀏覽器版本太低，沒法支持此頁面，請升級頁面；</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</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!');
- 1. vue-cli3建立及配置
- 2. Vue Cli3 建立項目
- 3. Vue-cli3 項目建立
- 4. 前端vue:使用vue-cli3建立項目Vue+TypeScript 項目
- 5. vue-cli3快速建立項目
- 6. vue-cli3建立項目時報錯
- 7. vue-cli3.X快速建立項目
- 8. vue-cli3.x建立及運行項目
- 9. vue cli3/4 命令行建立工程
- 10. vue-cli3建立多頁面項目
- 更多相關文章...
- • SQL 通用數據類型 - SQL 教程
- • SVN 創建版本庫 - SVN 教程
- • 委託模式
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。