diff --git a/devui-cli/shared/constant.js b/devui-cli/shared/constant.js
index d3f2804da3da7f3965a9f9c065fc1712b7141a33..6288409782d590df0d3e450b4f279a854a627793 100644
--- a/devui-cli/shared/constant.js
+++ b/devui-cli/shared/constant.js
@@ -5,6 +5,7 @@ exports.VERSION = version
 exports.CWD = process.cwd()
 exports.DEVUI_DIR = resolve(this.CWD, 'devui')
 exports.DEVUI_NAMESPACE = 'd'
+exports.CSS_CLASS_PREFIX = 'devui'
 exports.TESTS_DIR_NAME = '__tests__'
 exports.INDEX_FILE_NAME = 'index.ts'
 exports.DOCS_FILE_NAME = 'index.md'
diff --git a/devui-cli/templates/component.js b/devui-cli/templates/component.js
index 8f376f876d92c7fed9b7d65fe42a76df8ed81f15..b98a5c44f2d46ae0b29ab6f93991880e338c6f94 100644
--- a/devui-cli/templates/component.js
+++ b/devui-cli/templates/component.js
@@ -1,13 +1,12 @@
-const { DEVUI_NAMESPACE } = require('../shared/constant')
+const { DEVUI_NAMESPACE, CSS_CLASS_PREFIX } = require('../shared/constant')
 const { camelCase } = require('lodash')
 const { bigCamelCase } = require('../shared/utils')
 
 // 创建组件模板
 exports.createComponentTemplate = ({ styleName, componentName, typesName }) => `\
-import './${styleName}.scss'
-
 import { defineComponent } from 'vue'
 import { ${camelCase(componentName)}Props, ${bigCamelCase(componentName)}Props } from './${typesName}'
+import './${styleName}.scss'
 
 export default defineComponent({
   name: '${bigCamelCase(DEVUI_NAMESPACE)}${bigCamelCase(componentName)}',
@@ -15,7 +14,7 @@ export default defineComponent({
   emits: [],
   setup(props: ${bigCamelCase(componentName)}Props, ctx) {
     return (
-      <div class="${DEVUI_NAMESPACE}-${componentName}"></div>
+      <div class="${CSS_CLASS_PREFIX}-${componentName}"></div>
     )
   }
 })
@@ -60,7 +59,7 @@ export default ${bigCamelCase(serviceName)}
 
 // 创建scss模板
 exports.createStyleTemplate = ({ componentName }) => `\
-.${DEVUI_NAMESPACE}-${componentName} {
+.${CSS_CLASS_PREFIX}-${componentName} {
   //
 }
 `
@@ -80,7 +79,7 @@ exports.createIndexTemplate = ({
   const importDirectiveStr = `\nimport ${bigCamelCase(directiveName)} from './src/${directiveName}'`
   const importServiceStr = `\nimport ${bigCamelCase(serviceName)} from './src/${serviceName}'`
 
-  const installComponentStr = `\n    app.use(${bigCamelCase(componentName)} as any)`
+  const installComponentStr = `    app.use(${bigCamelCase(componentName)} as any)`
   const installDirectiveStr = `\n    app.directive('${bigCamelCase(componentName)}', ${bigCamelCase(directiveName)})`
   const installServiceStr = `\n    app.config.globalProperties.$${camelCase(serviceName)} = ${bigCamelCase(
     serviceName