【Vue】基于脚手架(vue-cli)项目搭建

最新推荐文章于 2024-06-17 02:23:22 发布

我要手撕源码

最新推荐文章于 2024-06-17 02:23:22 发布

阅读量91

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_48171371/article/details/115767129

版权

Vue

新建VUE项目

以下用npm按照失败的都可以将npm换成cnpm

创建项目

vue init webpack <项目名> #新建项目

选项全部选no（手动安装）

? Project name blog-vue
? Project description A Vue.js project
? Author Architecture_HUI 815438732@qq.com
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) no

安装环境

# 先进入项目中
cd <项目名>
npm install #安装项目所需的依赖环境(根据packet.json安装) ,安装完成后该项目多了个node_modules文件

建议先安装完再打开项目

安装路由

npm install vue-router --save-dev

在src下新建router/index.js

每添加一个路由都在此添加即可

import Vue from 'vue'
// es6语法引入
import Router from 'vue-router'
// 1、引入组件,进行路由切换组件
import index from '../components/index'


// 2、注册
Vue.use(Router)
// 3、实例化
export default new Router({
  routes: [
    {
     // 4、配置路由
      path: '/index',
      name: 'index',
      component: index
    },
  ]
})

在main.js导入上面新建的index.js

只需要设置一次就不用管了

//导入路由
import router from './router' 

Vue.config.productionTip = false

new Vue({
  //...
  router, //添加这行代码
})

使用

<template>
<div id="app">
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
    
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

//...

安装Element-ui

npm i element-ui -S

在mian.js中加入

// ...
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
// ...

就可以在vue中使用了！

安装axios

cnpm install axios --save-dev

方法1：

在mian.js引入

import Vue from 'vue'//引入vue 

import axios from 'axios'//引入axios 

Vue.prototype.$axios = axios;//把axios挂载到vue上

使用：

在上面引入时，Vue.prototype.$axios = axios;

所以在vue对象中使用this.$axios就表示axios对象

//在vue实例中的一个函数
function(){
 this.$axios.get('../json/data.json')

.then(**function**(res){//帮助突破技术瓶颈，提升思维能力  //接口**成功返回结果执行**  })

.catch(function(err){//请求失败或者接口返回失败或者.then()中的**代码发生错误时执行**  })

}

方法2：

src目录下创建api目录，然后创建api.js和index.js文件

index.js文件是对axios做配置

import Vue from 'vue'
import Axios from 'axios'

const axiosInstance = Axios.create({
    withCredentials: true
})

// 通过拦截器处理csrf问题，这里的正则和匹配下标可能需要根据实际情况小改动
axiosInstance.interceptors.request.use((config) => {
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    const regex = /.*csrftoken=([^;.]*).*$/
    config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
    return config
})

axiosInstance.interceptors.response.use(
    response => {
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

Vue.prototype.axios = axiosInstance

export default axiosInstance

api.js文件是对后端进行请求

使用举例

import axiosInstance from './index'

const axios = axiosInstance

export const getBooks = () => {return axios.get(`http://localhost:8000/api/books/`)}

export const postBook = (bookName, bookAuthor) => {
    return axios.post(`http://localhost:8000/api/books/`, {
        params:{
            'name': bookName, 'author': bookAuthor
        }
    })}

安装SASS加载器

cnpm install sass-loader node-sass --save-dev

安装依赖

npm install

启动项目

npm run dev

安装失败根据提示修改，启动失败的话可以用cnpm重装依赖

其他

导航栏页边距

在这里插入图片描述

审查元素后发现，是body元素的margin的问题

在根目录下找到index.html，修改body的style

... 
<body style="margin: 0%;">
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
...

卡片

居中

<!-- gutter：两个col元素之间的距离 -->
    <el-row :gutter="50" type="flex" justify="center">
    <!-- 一行span=24 -->
    <el-col :span="8">
        <el-card shadow="hover"> 鼠标悬浮时显示 </el-card>
    </el-col>
    <el-col :span="8">
        <el-card shadow="hover"> 鼠标悬浮时显示 </el-card>
    </el-col>
</el-row>

我要手撕源码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】基于脚手架(vue-cli)项目搭建

Vue新建VUE项目以下用npm按照失败的都可以将npm换成cnpm创建项目vue init webpack <项目名> #新建项目选项全部选no（手动安装）? Project name blog-vue? Project description A Vue.js project? Author Architecture_HUI 815438732@qq.com? Vue build standalone? Install vue-router? No? Use E
复制链接

扫一扫