使用Vue搭建电商后台管理系统

使用vue-cli初始化一个项目结构

• 安装：npm i -g vue-cli
• 脚手架生成项目结构：vue init webpack 项目名称

    /asset              项目中的静态资源
       index.css        项目的全局样式
    /components         项目中的组件
    /router             项目中的路由文件
       index.js         所有的路由组件
    APP.vue             项目的根组件，只有一个路由出口
    main.js             整个项目的入口，也是webpack打包的入口
复制代码

开启一个新功能

• 在components目录中创建组件
• 在router/index.js中配置路由

使用element-ui组件库

• 安装：npm i element-ui -S
• 在main.js中导入：
  • js文件：import ElementUI from 'element-ui'
  • 样式：import 'element-ui/lib/theme-chalk/index.css'
  • UI插件：Vue.use(Element-UI)

在组件中使用预编译css

• 安装:npm i -D less less-loader

抽离单文件组件的内容

• 说明：如果将所有的template、script、style都放在.vue文件中，那么，这个文件会变得非常臃肿。可以将不同的内容，抽离到单独的文件中

<!--将模板抽离到当前目录下的：template.html文件中-->
<tempalte src="./template.html"></template>
<!--将js抽离到当前目录下的：sccript.js文件中-->
<script srcc="./script.js"></sccript>
<!--将style抽离到当前目录下的：style.css文件中-->
<style src="./style.less" lang="less"></style>
复制代码

转载于:https://juejin.im/post/5b4ff054f265da0f9a2ce131