vue 从零开始搭建项目（一）

2017-08-21 本文已影响0人 Sharise_Mo佩珊

技术栈：Vue-cli , vux , axios , vue-loader , webpack

项目基本架构 - Vue-cli

1、vue.js 提供一个官方命令行工具，可以用于快速搭建大型单页应用。
2、安装命令
$npm install --global vue-cli //全局安装vue$ vue init webpack my-project001 //创建一个基于webpack模板的新项目，可以用vue init webpack-simple my-project001 (该模板的的webpack配置更为简单)
$cd my-project001$ npm install //注意此处不能用cnpm，避免部分依赖丢失
$npm run dev //运行vue项目 //打包构建部署命令$ npm run build //该命令的配置信息在webpack文件中，打包之后可以将打包后得到的文件放到服务器，与后端结合
3、淘宝镜像安装方法
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue 全家桶

vue-router , vux , vue-loader , awesome-vue
$ npm install vue-router vue-resource vuex --save
安装vue全家桶，然后引入到项目中来。修改src/main.js 文件
import Vue from 'vue';
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(Vux);
new Vue({
el:'#app',
render : h=>h(App)
});
学习资源：

vue.js中文论坛：https://forum.vuejs.org/c/chinese
vue.js讨论组：https://gitter.im/vuejs/vue
Docs for this template ：http://vuejs-templates.github.io/webpack/
vue全家桶：
vue-router: https://router.vuejs.org/zh-cn/
vuex: https://vuex.vuejs.org/zh-cn/
vuex的理解：https://www.cnblogs.com/y896926473/p/6709733.html
vue-loader: https://vue-loader.vuejs.org/zh-cn/
awesome-vue: https://github.com/vuejs/awesome-vue

安装vux -- 一个基于vue的weui框架

$ npm install vux --save
配置webpack.base.conf.js：

image.png

安装 axios

$ npm install axios --save
在引用axios的文件中配置：【在tool/ajax定义调用接口的方法时设置】
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

rem适配

在index.html中获取屏幕宽高，结合设计稿进行计算，搞定rem与px的转换

手机端适配插件

amfe-flexible：可伸缩布局方案（淘宝，网易都在用）
postcss-pxtorem ：提供不同参数设置来转换css中的px，rootValue用来定义转化时根元素的值
autoprefixer: 自动加浏览器前缀

image.png

image.png

关于elementui 的一些组件使用

el-table 限制某些行可选，某些不可选

<!--selectable 是一个函数，返回可以选中的行-->
<el-table :data="list" size="mini"     @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
</el-table>

methods: {
    checkSelectable(row) {
      return row.received_status == 0
    },
}

在table中使用radio，选中一行的时候radio选中

<!--radio 作为唯一选中值
　:label的绑定属性为:label="scope.row.id"，采用每条项目唯一的标识值
　handleSelRow的方法使用this.radio = row.id来选中单选按钮
-->
<el-table :data="list" size="mini" @row-click="handleSelRow">
      <el-table-column label="" width="50">
        <template slot-scope="scope">
          <el-radio v-model="radio" :label="scope.row.id">
            <span></span>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="activity_name" label="活动名称"></el-table-column>
      <el-table-column label="活动时间">
        <template slot-scope="scope">
          <span v-if="scope.row.long_term && scope.row.long_term == 1">长期有效</span>
          <span v-else>{{scope.row.begin_time ? dateFn(scope.row.begin_time) : '--'}} ~ {{ scope.row.end_time ? dateFn(scope.row.end_time) : '--'}}</span>
        </template>
      </el-table-column>
</el-table>

    // 选中某一行
    handleSelRow(row){
      this.radio = row.id
      this.$emit('complete', row)
    }