VUE项目学习——入门篇

准备

• 首先删除vue demo hello vue相关代码和文件

  • components下的helloworld.vue
  • app.vue 中的img 标签
  • router中的helloworld声明和引用
• 引入一个简单的样式组件库 npm i element-ui -S 方便书写几个简单组件举例学习

• 目录初始化

  • 在src目录下新建views文件夹

  • 在 assess目录下新建 js、css、font、img四个文件夹

    • 在 css目录下新建 common.css文件

  • 在 components目录下新建 ui文件夹（用于存放纯ui性质组件）

    • 在 ui目录下新建 index.js文件
  • 在views目录下新建viewPage1、viewPage2文件夹及文件夹下的index.vue（实际应用中的两个子页面或者子功能）

  • 在build目录下webpack.base.conf.js文件的alias对象中添加几个属性

    • '@components': resolve('src/components'),
    • '@ui': resolve('src/components/ui'),
    • '@static': resolve('static'),
    • '@assess': resolve('assess'),
    • 在之后的impotent引用中即可使用@**代替相应较长的目录（webpack构建时会检测替换）
• 在main.js中引入common.css 和 ui/index.js
  import '@assess/css/common.css'
  import commonUI from '@ui/index.js'
  Vue.use(commonUI)

• 在main.js中注册element-ui的部分组件

  • 

• 在router中注册这两个子页面

  • 
  • paht：‘/’为page1，即项目首页变成了page1

简单clone一个页面

• 简单复制一下vue指南官网 https://cn.vuejs.org/v2/guide/
• 很明显该页面布局采用顶栏+左侧边栏布局，很像ui中的Container 布局容器

• 接下来我们只需要在page1中使用这些样式库中的容器组件即可

  • 
  • 接下来还可以在components目录中新建一些组件或者隶属于page1页面自己的子组件在page1目录中新建一个widgets目录下
  • 总之可以自己按照使用element-ui组件的方式自建一些组件试试看
• 项目中的ESlint代码规范检查还未经过配置，vue官方demo项目每行语句后面的风格都是不加分号，不推荐