vue 项目搭建 及基础介绍

一、Vue-CLI项目搭建

1、环境搭建

a、安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

b、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

c、安装脚手架

cnpm install -g @vue/cli

 d、清空缓存处理

npm cache clean --force

 2、项目的创建

a、创建项目

vue creat 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件

b、启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

c、打包项目

npm run build
// 要在项目根目录下进行打包操作

3、认识项目

a、项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

b、配置文件：vue.config.js

module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,选做  也可以通过编辑器ide来修改

c、main.js   （主要的配置文件）

new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})

d、.vue文件（有三部份组成）

<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

二、Vue项目操作

1、创建一个组件：

-创建一个course.vue
-配置路由:route.js中
    import Course from './views/Course.vue'  // 导入组件
    
{
    path: '/course',
    name: 'course',
     component:Course  # 给组建配置路由
    }
-<router-link to="/course">免费课程</router-link>  // 实现路由跳转

2、显示数据：

-在组件的script部分中:
    data:function () {
        return{
            courses:['python','linux','java'],  // 数据必须放在return中
        }
    }
-在template中就可以使用retrun的变量
    -{{courses}}
    -用v-for显示数据
        <ul>
          <li v-for="course in courses">{{course}}</li> 
        </ul>

3、用axios实现与后台交互：

a、axios的安装

axios  vue的ajax
-安装： 在Terminal中输入 npm install axios 执行，

// 组件中：数据渲染
// template：
<button @click="init">点我</button> // 让button跟init方法绑定
// script
methods: {
    init: function () {
        // 向后台发送请求,加载数据
        alert(1)
    },
    }

b、axios实现与后台进行数据交互

// axios的使用
    // main.js加上以下两句
        // 导入axios
        import axios from 'axios'
        // 相当于放到全局变量中
        Vue.prototype.$http=axios
    // 在组件中使用(script中,一般在方法中写)  链式书写方式
        this.$http.request({
            url:'请求的地址',
            method:'请求方式'
        }).then(function(response){
            // 请求成功会回调该匿名函数
            // 取实际返回的值response.data中取

        }).catch(function (error) {
            // 请求出现错误,回调该方法
        })

三、element-ui的安装及使用

1、安装element-ui

安装 npm i element-ui -S/
cnpm i element-ui -S

2、element-ui的使用

// 使用:
    // 1 在main.js中
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
    // 2 从官网上copy代码,粘贴,修改
// 图片绑定
    // item是js中的一个变量 一定要在src前添上冒号（相当于v-bind：）进行绑定
    <img :src="item" >