您的位置:首页 > Web前端 > Vue.js

Nodejs,npm,vue,elementui

2020-04-24 08:34 543 查看

文章目录

  • elementui
  • Nodejs安装

    1.NodeJs下载:https://nodejs.org/en/download/
    2.nodejs里面自带npm项目管理工具
    3.升级:

    npm install npm@latest -g

    4.在idea中安装nodejs插件和vuejs代码提示插件

    创建项目

    1.创建前端项目
    2.初始化

    npm init -y

    3.安装vue模块
    npm install -g vue
    (全局安装)

    1.MV VM模式:

    Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
    View:它专注于界面的显示和渲染,在Vue中则是包含一堆声明式Directive和Component的视图模板。
    ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在vue中“Vue对象实例”充当了这个ViewModel的角色;

    2.vue常见指令

    v-model=“表达式” 数据双向绑定 (缩写

    )
    v-text=“表达式” 设置标签中的文本
    v-html=“表达式” 设置标签中的html
    v-if(else else if)=“表达式” 判断条件
    v-for=“表达式” 循环
    v-on=“表达式” 注册事件 (缩写
    @
    )
    watch监控

    <div id="app">
    <input type="text" v-model="message">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
    el:"#app",
    data:{
    message:""
    },
    watch:{
    message(newVal, oldVal){
    console.log(newVal, oldVal);
    }
    }
    })
    </script>

    3.vue组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
    <mytag></mytag>
    <mytag2></mytag2>
    </div>
    <div id="app2">
    <mytag></mytag>
    <mytag2></mytag2>
    </div>
    <script>
    <!--全局组件 在不同vue中使用-->
    Vue.component("mytag",{
    template:"<h1>全局组件</h1>"
    })
    new Vue({
    el:"#app",
    data:{
    },
    components:{
    "mytag2":{
    template:"<h1>局部组件</h1>"
    }
    }
    })
    new Vue({
    el:"#app2"
    })
    </script>
    </body>
    </html>

    4.vue路由

    路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求(url地址和对应的资源的映射)
    路由插件安装

    npm install vue-router

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
    <div id="app">
    <p>
    <router-link to="/music">音乐</router-link>
    <router-link to="/friend">朋友</router-link>
    <router-link to="/like">喜爱</router-link>
    </p>
    <!--路由出口-->
    <router-view></router-view>
    </div>
    <script>
    /*new Vue({
    el:"#app",
    data:{},
    router:new VueRouter({
    routes:[
    {path:'/music',component:{template:"<h1>你想听音乐吗</h1>"}},
    {path:'/friend',component:{template:"<h1>你的朋友呢</h1>"}},
    {path:'/like',component:{template:"<h1>这音乐你喜欢吗</h1>"}}
    ]
    })
    })*/
    /*路由拆解*/
    /*创建模板*/
    const music={template:"<h1>你想听音乐吗</h1>"}
    const friend={template:"<h1>你的朋友呢</h1>"}
    const like={template:"<h1>这音乐你喜欢吗</h1>"}
    const routes=[
    /*路由路径+组件*/
    {path:"/music",component:music},
    {path:"/friend",component:friend},
    {path:"/like",component:like}
    ]
    //创建路由
    const router = new VueRouter({
    routes
    })
    new Vue({
    el:"#app",
    //引入路由
    router //router:router
    })
    </script>
    </body>
    </html>

    5.webpack

    将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
    将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
    将代码打包的同时进行混淆,提高代码的安全性。
    安装

    npm install -g webpack

    6.vue-cli(脚手架)

    安装

    npm install -g vue-cli

    elementui

    1.创建项目
    vue init webpack

    2.安装elementui
    npm i element-ui -S

    3.在main.js中导入

    import ElementUI from 'element-ui'; //引入核心js组件
    import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
    Vue.use(ElementUI)

    4.使用

    component

    <template>
    <div>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
    fixed
    prop="date"
    label="日期"
    width="150">
    </el-table-column>
    <el-table-column
    prop="name"
    label="姓名"
    width="120">
    </el-table-column>
    <el-table-column
    prop="province"
    label="省份"
    width="120">
    </el-table-column>
    <el-table-column
    prop="city"
    label="市区"
    width="120">
    </el-table-column>
    <el-table-column
    fixed="right"
    label="操作"
    width="100">
    <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small">编辑</el-button>
    </template>
    </el-table-column>
    </el-table>
    <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    layout="sizes,prev, pager, next"
    :page-size="size"
    :page-sizes="[5,10,15]"
    :total="total">
    </el-pagination>
    </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
    
    name: 'Table',
    data() {
    return {
    tableData:[],
    total:0,
    currentPage:1,
    size:5
    }
    },
    methods:{
    handleCurrentChange(currentPage){
    this.currentPage=currentPage
    this.tableData=[]
    this.gettableData()
    },
    handleSizeChange(size){
    this.size=size
    this.gettableData()
    },
    gettableData(){
    axios.post('/datalist').then(result=>{
    let list =result.data.tableData
    this.total=list.length
    this.tableData=list.slice((this.currentPage-1)*this.size,this.currentPage*this.size)
    
    })
    }
    },
    mounted(){
    this.gettableData()
    }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
    font-weight: normal;
    }
    ul {
    list-style-type: none;
    padding: 0;
    }
    li {
    display: inline-block;
    margin: 0 10px;
    }
    a {
    color: #42b983;
    }
    </style>

    router

    import Table from '@/components/Table'
    
    Vue.use(Router)
    
    export default new Router({
    routes: [
    {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
    },
    {
    path: '/table',
    name: 'Table',
    component: Table
    },
    ]
    })

    main.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'; //引入核心js组件
    import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
    import './js/tableData'
    Vue.use(ElementUI)
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
    })

    5Mock.js模拟数据

    安装

    npm install mockjs

    模拟数据

    import Mock from 'mockjs' // 引入mock
    
    var dataList = []
    for (var i = 0; i < 15; i++) {
    dataList.push(Mock.mock({
    'date': '@date',
    'name': '@cname',
    'province': '@county',
    'email': '@email',
    'city': '@region',
    }))
    }
    //模拟请求
    Mock.mock(new RegExp('/datalist'),'post',(param)=>{
    return {
    "tableData":dataList
    }
    })

    6ajax请求优化-axios

    安装

    npm install axios --save

    import axios from 'axios'
    
    //配置axios的全局基本路径
    axios.defaults.baseURL='http://localhost:80'
    //全局属性配置,在任意组件内可以使用this.$http获取axios对象
    Vue.prototype.$http = axios
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    酸辣菜菜鱼 发布了16 篇原创文章 · 获赞 0 · 访问量 92 私信 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: