vue进阶2-构建基础框架

Graycrr

一、添加CSS预处理器SASS

关于SASS语法的注释:
lang =“scss”对应于CSS-superset语法(带大括号和分号)。
lang =“sass”对应于基于缩进的语法。

1.安裝sass的依赖包

 npm install sass-loader node-sass --save-dev

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
}

3.在APP.vue组件中使用预处理器,修改<style>标签上的lang属性:

    <style lang="scss">
      @import "./style/reset.css";
      @import "./style/style.scss";
    </style>

二、添加element-ui

1.安装element-ui依赖

 npm install element-ui --save

2.在main.js中引用

 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)

3.在*.vue中调用组件

    <el-button>测试</el-button>

三、添加font-awesome字体图标库

根据需求可选择安装,引用: <i class="fa fa-user-circle"></i>

npm install font-awesome --save

四、添加axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

1.安装axios

 npm install axios --save

2.在main.js引入axios

  import Axios from 'axios'
  Vue.prototype.$axios = Axios

3.简单运用axios

  this.$axios.get('url', {
    params: {
      a: xxx,
    }
  }).then(res => {console.log(res)});
    .catch(err => {console.log(err)});
    
  this.$axios.post('url', {
      a: xxx,
  }).then(res => {console.log(res)});
    .catch(err => {console.log(err)});
    

五、添加vuex

1.安装vuex依赖

 npm install vuex --save

2.在main.js中引入vuex

 import vuex from 'vuex'
 Vue.use(vuex)
 var store = new vuex.Store({
   state: {
     age: 20
   }
 })

3.在实例化Vue对象中加入store对象, this.$store.state.age 就可以使用了。

 new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
 })     
以上只是为了方便简单演示,把store对象写在main.js里面,在实际运用中,可以在src目录下建一个store文件夹来专门处理vuex

六、完善后目录结构

添加style(样式)、store(vuex)、pages(页面)、images(图片)、common(公用js)等目录文件

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要项目配置
│   └── ...
├── src/
│   ├── main.js                 # 应用入口js文件
│   ├── App.vue                 # 主应用程序组件
│   ├── components/             # 公共组件目录
│   │   └── ...
│   └── store/                  # vuex
│   │   └── ...
│   └── pages/                  # 页面目录
│   │   └── ...
│   └── images/                 # 图片目录
│   │   └── ...
│   └── style/                  # 样式目录
│   │   └── ...
│   └── common/                 # 公共js目录
│   │   └── ...
│   └── router/                 # 前端路由
│   │   └── ...
│   └── assets/                 # 模块资源(由webpack处理)
│       └── ...
├── static/                     # 纯静态资源(直接复制)
├── .babelrc                    # babel 配置,es6需要babel编译
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # 编辑器 配置
├── .gitignore                  # 过滤无需上传的文件
├── index.html                  # index.html模板
└── package.json                # 构建脚本和依赖关系

阅读 853
102 声望
8 粉丝
0 条评论
102 声望
8 粉丝
宣传栏