记录一下最近之前学习vuejs的代码

标签：lin   代码   cnpm   ons   记录   catch   block   mob   github   

main.js
import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(ElementUI);

//创建组件
import New1 from './components/New1';
import Home1 from './components/Home1';
//配置路由
const routes = [
  { path: '/news', component: New1 },
  { path: '/home', component: Home1 }
]
//实例化vueRouter
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

new Vue({
  el: '#app',
  //挂在路由
  router,
  render: h => h(App)
})

//  放在App.vue

App.vue

components/Header.vue

components/Home.vue

components/Home1.vue

components/Life.vue

components/New1.vue

components/New.vue

model/storage.js
var storage={
    set(value){
        console.log(JSON.stringify(value));
    }
}

export default storage;

import Vue from 'vue'

var vueEvent = new Vue()

export default vueEvent

基于Vue的Ui框架


    饿了么公司基于vue开的的vue的Ui组件库


        Element Ui    基于vue  pc端的UI框架  


        MintUi         基于vue 移动端的ui框架



http://element.eleme.io/


element UI的使用：



    1.找官网  http://element.eleme.io/#/zh-CN/component/quickstart

    2.安装  cnpm i element-ui -S         -S表示  --save

    3.引入element UI的css 和 插件

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

            
    

    4、*webpack.config.js  配置file_loader      http://element.eleme.io/1.4/#/zh-CN/component/quickstart


          {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
              }



    5.看文档直接使用。




element UI组件的单独使用（第一种方法）：


    1、cnpm install babel-plugin-component -D    


    2、找到.babelrc 配置文件
        把

        {
          "presets": [
            ["env", { "modules": false }],
            "stage-3"
          ]
        }


        改为  注意：
        
        
        {
          "presets": [["env", { "modules": false }]],
          "plugins": [
            [
              "component",
              {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        }

    3、
    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)


element UI组件的单独使用（第二种方法）：



    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)
    

    引入对应的css

        import 'element-ui/lib/theme-chalk/index.css';

    如果报错： webpack.config.js  配置file_loader

          {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
              }


    

    1、必须要安装nodejs


    2、搭建vue的开发环境 ，安装vue的脚手架工具   官方命令行工具

        npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只需要执行一次）

    
    3、创建项目   必须cd到对应的一个项目里面
            
        vue init webpack vue-demo01

        cd  vue-demo01 
        
        cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
        
        npm run dev

https://router.vuejs.org/


vue路由配置：


    1.安装 

    npm install vue-router  --save   / cnpm install vue-router  --save


    2、引入并 Vue.use(VueRouter)   (main.js)
 
        import VueRouter from 'vue-router'

        Vue.use(VueRouter)

    
    3、配置路由

        

        1、创建组件 引入组件


        2、定义路由  （建议复制s）

            const routes = [
              { path: '/foo', component: Foo },
              { path: '/bar', component: Bar },
              { path: '*', redirect: '/home' }   /*默认跳转路由*/
            ]

        3、实例化VueRouter

            const router = new VueRouter({
              routes // （缩写）相当于 routes: routes
            })

        4、挂载

                
        new Vue({
          el: '#app',
          router，
          render: h => h(App)
        })


        
        5 、根组件的模板里面放上这句话            




        6、路由跳转
        Go to FooGo to Bar

记录一下最近之前学习vuejs的代码

标签：lin   代码   cnpm   ons   记录   catch   block   mob   github   

原文地址：https://www.cnblogs.com/dennylau/p/12149693.html