How to use @vue/cli-ui - 6 common examples
To help you get started, we’ve selected a few @vue/cli-ui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
KuangPF / vue-cli-analysis / packages / @vue / cli / lib / ui.js View on Github 
enableEngine: false,
cors: '*',
timeout: 1000000,
quiet: true,
paths: {
typeDefs: require.resolve('@vue/cli-ui/apollo-server/type-defs.js'), // schema
resolvers: require.resolve('@vue/cli-ui/apollo-server/resolvers.js'), // resolvers
context: require.resolve('@vue/cli-ui/apollo-server/context.js'), // 可以向 resolvers 注入上下文对象
pubsub: require.resolve('@vue/cli-ui/apollo-server/pubsub.js'), // 订阅
server: require.resolve('@vue/cli-ui/apollo-server/server.js'), // express 服务 e.g. express.static
directives: require.resolve('@vue/cli-ui/apollo-server/directives.js') // schema 指令
}
}
server(opts, () => {
// Reset for yarn/npm to work correctly
if (typeof nodeEnv === 'undefined') {
delete process.env.NODE_ENV
} else {
process.env.NODE_ENV = nodeEnv
}
// Open browser
const url = `http://${host}:${port}`
if (!options.quiet) log(`🌠 Ready on ${url}`)
if (options.headless) {
console.log(port)
} else {
openBrowser(url)
}
})enableMocks: false,
enableEngine: false,
cors: '*',
timeout: 1000000,
quiet: true,
paths: {
typeDefs: require.resolve('@vue/cli-ui/apollo-server/type-defs.js'),
resolvers: require.resolve('@vue/cli-ui/apollo-server/resolvers.js'),
context: require.resolve('@vue/cli-ui/apollo-server/context.js'),
pubsub: require.resolve('@vue/cli-ui/apollo-server/pubsub.js'),
server: require.resolve('@vue/cli-ui/apollo-server/server.js'),
directives: require.resolve('@vue/cli-ui/apollo-server/directives.js')
}
}
server(opts, () => {
// Reset for yarn/npm to work correctly
if (typeof nodeEnv === 'undefined') {
delete process.env.NODE_ENV
} else {
process.env.NODE_ENV = nodeEnv
}
// Open browser
const url = `http://${host}:${port}`
if (!options.quiet) log(`🌠 Ready on ${url}`)
if (options.headless) {
console.log(port)
} else {
openBrowser(url)
}
})async function ui (options = {}, context = process.cwd()) {
const host = options.host || 'localhost'
let port = options.port
if (!port) {
port = await portfinder.getPortPromise() // port
}
// Config
process.env.VUE_APP_CLI_UI_URL = ''
// Optimize express
const nodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = 'production'
// Dev mode
if (options.dev) {
process.env.VUE_APP_CLI_UI_DEV = true
}
if (!process.env.VUE_CLI_IPC) {
// Prevent IPC id conflictsasync function ui (options = {}, context = process.cwd()) {
const host = options.host || 'localhost'
let port = options.port
if (!port) {
port = await portfinder.getPortPromise()
}
// Config
process.env.VUE_APP_CLI_UI_URL = ''
// Optimize express
const nodeEnv = process.env.NODE_ENV
process.env.NODE_ENV = 'production'
// Dev mode
if (options.dev) {
process.env.VUE_APP_CLI_UI_DEBUG = true
}
if (!process.env.VUE_CLI_IPC) {
// Prevent IPC id conflictsasync function onWebpackMessage({ data: message }) {
if (message.webpackDashboardData) {
const modernMode = getSharedData('modern-mode').value;
const type = message.webpackDashboardData.type;
for (const data of message.webpackDashboardData.value) {
const id = `${type}-${data.type}`;
if (data.type === 'stats') {
// Stats are read from a file
const statsFile = path.resolve(api.getCwd(), `./node_modules/.stats-${type}.json`);
const value = await fs.readJson(statsFile);
const { stats, analyzer } = processStats(value);
setSharedData(id, stats);
setSharedData(`${id}-analyzer`, analyzer);
await fs.remove(statsFile);
} else if (data.type === 'progress') {
if (type === 'serve' || !modernMode) {
setSharedData(id, {
[type]: data.value,
});
} else {
// Display two progress bars
const progress = getSharedData(id).value;
progress[type] = data.value;
for (const t of ['ssr-build', 'ssr-build-modern']) {
setSharedData(`${t}-${data.type}`, {
'ssr-build': progress['ssr-build'] || 0,
'ssr-build-modern': progress['ssr-build-modern'] || 0,onConfigOpen: async ({ context }) => {
const tasks = require('@vue/cli-ui/apollo-server/connectors/tasks')
return {
prompts: [
{
name: 'task',
type: 'list',
message: 'org.vue.widgets.run-task.prompts.task',
choices: (await tasks.list(undefined, context)).map(task => ({
name: task.name,
value: task.id
}))
}
]
}
}
})
