vue搭建

矫情吗；* 2022-05-24 07:43 236阅读 0赞

#     #

# 转自：https://www.cnblogs.com/xiaonizi2/p/7162676.html #

#     #

# [vue 项目搭建][vue] #

[cli 方式安装][cli]      [集成了内置webpack 模块][webpack]

# 安装步骤 #

1、全局安装 vue-cli

$ npm install --global vue-cli

2、 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

3、安装依赖，走你

$ cd my-project
    $ npm install
    $ npm run dev

如果npm安装慢的话 可以使用淘宝镜像

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

# 项目结构简单介绍 #

build 目录是一些webpack的文件，配置参数什么的，一般不用动

config 是vue项目的基本配置文件   
node\_modules 是项目中安装的依赖模块   
src 源码文件夹，基本上文件都应该放在这里。   
—assets 资源文件夹，里面放一些静态资源   
—components 这里放的都是各个组件文件   
—App.vue  App.vue组件   
—main.js 入口文件   
static 生成好的文件会放在这个目录下。   
test 测试文件夹，测试都写在这里   
.babelrc babel 编译参数，vue开发需要babel编译   
.editorconfig  看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。   
.gitignore  用来过滤一些版本控制的文件，比如node\_modules文件夹   
index.html  主页   
package.json  项目文件，记载着一些命令和依赖还有简要的项目描述信息   
README.md  介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的

# package.json #

ependencies：项目发布时的依赖

devDependencies：项目开发时的依赖  
scripts：编译项目的一些命令

.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。

# min.js文件介绍 #

这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。

![复制代码][copycode.gif]

/*引入Vue框架*/
    import Vue from 'vue'
    /*引入资源请求插件*/
    import VueResource from 'vue-resource'
    /*重置样式*/
    import "assets/css/base.css"
    /*基本JS*/
    import "assets/js/common.js"
    /*引入路由设置*/
    import "./routers.js"
    /*使用VueResource插件*/
    Vue.use(VueResource)

![复制代码][copycode.gif]

# App.vue  #

这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。

![复制代码][copycode.gif]

<template>
     <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
    
    <script>
    import Hello from './components/Hello'
    
    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![复制代码][copycode.gif]

vue-route

[官网路由中文手册][Link 1]

作用：

通过管理url实现url和组件的对应，

通过url进行组件之间的切换

## 必须引入router组件 是单独文件 ##

![复制代码][copycode.gif]

![复制代码][copycode.gif]

模板中使用标签介绍

## 自定义导航标签 ##

![复制代码][copycode.gif]

ag="li"
    tag="div"
     <router-view tag="li"></router-view>
    
             <router-link to="/user" tag="div" event="mouseover"> 用户</router-link>
            <router-link to="/home" tag="li"> 主页</router-link>
            <router-link to="/about" tag="li" active-class="lishuang-active"> 关于</router-link>

![复制代码][copycode.gif]

统一设置class 名字

new VueRouter({
      mode: 'history',
      linkActiveClass: 'active', //给所有导航统一设置class名字

单独给导航设置样式名字

<router-link active-class="lishuang-active"> 
      active-class="lishuang-active"

###  exact 精准匹配 ###

当你把导航设置到 '/' 导航的激活样式 无论点击哪个都会匹配到跟，这是问题，

在导航里面添加 exact 就可以把这个问题解决

<router-link to="/" exact tag="li"> <a> 首页 </a></router-link> <span class="sr-only">(current)</span>

## 命名视图 ##

在同级同时展示多个视图，而不是嵌套

![复制代码][copycode.gif]

<router-view class="text-center" name="slider"></router-view>
            <router-view class="text-center"></router-view>
          
          在路由里面写：
          记住 component  -> components
          {
          path: '/blog',
          components: {
            default:Blog,
            slider:Slider
          }
        }

![复制代码][copycode.gif]

## 动态路径 ##

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』

space：  
当这个页面是商品列表  
点击这个列表进去商品详情  
这个商品详情展示信息，就是通过某个商品的id 去请求api得到的数据。  
这个id 怎么来呢？  
space2：  
当点击用户列表的时候 进入详情，需要根据url上面携带的id 来请求api数据

# axios使用 #

## 安装 ##

npm i axios vue-axios -D

在main.js 入口文件里面写

import Axios from 'axios'
      import VueAxios from 'vue-axios'
    
      Vue.use(VueAxios,Axios)

在其它组件里面调用

![复制代码][copycode.gif]

export default {
        name: 'blog',
        created () {
          this.getGoods()
        },
        methods: {
          getGoods () {
            this.$http.get('http://lc.shudong.wang/api_goods.php')
              .then((res) => {
                console.log(res.data)
              })
              .catch((error) => {
                console.log(error)
              })
          }
        }
      }

![复制代码][copycode.gif]

vue UI组件

## 使用目的： ##

提高开发效率  
直接拿过来用

## bootstrap ##

## [elementUi][] ##

## 安装 ##

npm ielement-ui -D

## 引入 main.js 入口文件 ##

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

[vue]: http://www.cnblogs.com/xiaonizi2/p/7162676.html
[cli]: https://cn.vuejs.org/v2/guide/installation.html
[webpack]: https://github.com/vuejs-templates
[copycode.gif]: /images/20220524/043bb429527b4623a845ed0181028f19.png
[Link 1]: https://router.vuejs.org/zh-cn/
[elementUi]: http://element.eleme.io/