Vue-Cli 学习整理【转载】

最新推荐文章于 2024-11-11 23:32:58 发布

a1000worlds

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量229

点赞数

分类专栏： pythonWeb 文章标签： vue.js 学习前端

原文链接：https://zhuanlan.zhihu.com/p/99207821

版权

pythonWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue-Cli 学习整理

坚果

程序猿/艺术

关注他

21 人赞同了该文章

1. vue-cli(vue脚手架)全集
- 1.1. vue-cli2脚手架
- 1.2. router实现子路由2

- 1.3. vue-cli3
- 1.4. vue-cli3项目案例需求分析

资料来源于慕课网视频学习，较基础和仔细，整理为文档！

1. vue-cli(vue脚手架)全集

1.1. vue-cli2脚手架

1.1.1. nodejs/npm环境安装

常用dos命令：
- cd 打开文件夹、md创建新文件夹、dir 查看文件夹内容、cd .. 返回上一级文件夹、cls清屏

1.1.2. vue-cli2安装

npm(node package manager)是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cnpm 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队分享了使用国内镜像来代替国外服务器
参数
- -g 参数，全局安装
- -S, --save安装包信息将加入到dependencie(生产阶段的依赖)
- -D, --save --dev 安装包信息将加入到devDependencie(开发阶段的依赖)
- i, 是 install 的缩写（前面没有 -）
- -gd/-gD/-g -d，综合上面两个参数，将开发华环境和生成环境都加进来
- npm root -g,查看全局安装的位置
npm install -g cnpm --registrys=https://registry.npm.taobao.org
为了避免每次安装都需要 --registry参数，可以使用如下命令进行永久设置
- npm config set registry https://registry.npm.taobao.org

安装 cnpm install -gd vue-cli，使用 vue -V，版本号为2.9.6

1.1.3. 创建vue-cli项目

语法：vue init webpack projectName，这里使用的是webpack,projectName是工程名，注意工程名字一般小写
创建过程的配置
- 是否安装vue-router，要安装
- 是否使用ESLint管理代码，代码风格管理工具，用来统一代码，不是项目的话，可以选择n
- 其他默认
进入D盘，md vuecli/ cd vuecli
初始化，vue init webpack test1，test1是子文件夹名字，如果初始化失败，重新安装
- 初始化后生成的目录主要有 build/config/node_modules/src
- src下包括有 assets/components/router/App.vue/main.js

按照系统提示
- cd test1
- npm run dev
然后就会进入 8080 本地界面

1.1.4. 自定义首页

在components组件文件夹创建 first.vue
编写代码：

<template>
    <div>
        first.vue
    </div>
</template>

进入router文件夹下的 index.js，用来控制页面路由，添加代码，
- 首先引入 import First from '@/components/first'
- 然后重新执行，npm run dev

1.1.5. router实现页面跳转

在首页，可以通过链接进入a,b两个“页面”，其实是进入components中的vue页面
修改 first.vue

<template>
    <div>
        <router-link to="">转向A</router-link>
        <router-link to="">转向B</router-link>
    </div>
</template>

新创建两个components下的vue文件 A.vue/B.vue

<template>
    <div>
        <p>我是A/B页面</p>
        <p><router-link to="/">返回</router-link></p>  //这里直接返回根目录
    </div>
</template>

在index.js中引入

import A from '@/components/A
import B from '@/components/B

export default new Router({
  export default new Router({
  routes: [
    {
      path: '/',
      //name: 'HelloWorld',
      //component: HelloWorld
      name: 'First',
      component: First
    },
    {
      path: '/a',  //定义路径名字
      component: A
    },
    {
      path: '/b',  //定义路径名字
      component: B
    }
  ]
})
})

进入跳转的页面 first.vue
在to后面添加路径名字，"/a"，"/b"

1.1.6. router实现子路由1

实现嵌套路由的效果：children:[{},{}]
实现多层路由
创建A1.vue作为A的子路由

<template>
    <div>
        <p>我是A1页面</p>
        <p><router-link to="/a">返回上一级<router-link></p>
        <p><router-link to="/">返回首页</router-link></p>
    </div>
</template>

首先引入：import A1 from '@/components/A1
作为子路由：

export default new Router({
  export default new Router({
  routes: [
    {
      path: '/',
      //name: 'HelloWorld',
      //component: HelloWorld
      name: 'First',
      component: First
    },
    {
      path: '/a',  //定义路径名字
      component: A,
      children: [
        {
            path:'/A1',
            component: A1
        }
      ]
    },
    {
      path: '/b',  //定义路径名字
      component: B
    }
  ]
})
})

在A.vue中添加 <p><router-link to:"/A1">转向A1</router-link></p>
这时候还不能进入到子路由A1页面，需要将路由挂载进来，在A.vue中添加<router-view></router-view>
- 但这里会将原来A.vue页面的元素也显示出来，也就是父子页面同时显示，可以应用于某些固定的导航栏页面跳转

1.2. router实现子路由2

上一个子路由是父子的关系，这里要使用平级的功能
只要将上一部分的children去掉，并将里面的内容提取到平级的部分

{
    path: '/a',  //定义路径名字
    component: A,
},
{
    path:'/A1',
    component: A1
}

1.2.1. 为什么不使用#号

路由两种显示模式
- hash模式：地址栏包括#符号，且#后面的不被后台获取
- history模式：具有对url历史记录进行修改的功能（使用较多）
在微信支付，分享url作为参数传递时，#不能满足需求
history需要后台配合，处理404问题
去掉#符号，在index.js文件中修改

export default new Router({
  mode: 'history',   //这里添加 history的模式
  routes: [
    {
        ...

1.2.2. 单独安装 eslint

npm i eslint -S/--save （安装到本地目录，也就是该工程目录下）
所有安装好的在package.json文件的dependencies下（或者devDependencies）下都会有相应的添加的项
eslint是规范检查，应该在开发环境中，生产环境中已经不太需要
那我们首先卸载 npm uninstall eslint
再重新安装到 dev 下，npm i eslint -D，这样就安装到devDependencies，也就是开发环境下。
- 不能使用 npm i eslint --dev，这样还是安装到生产环境，使用 npm i eslint --save-dev
- 可以使用 -D/--save-dev 安装到开发环境，缺一不可

1.2.3. 导入其他项目添加依赖并运行

怎样导入vue-cli项目
进入工程文件夹，npm install 安装相关依赖，部署配置环境，前提是vue和npm都安装
npm run dev 开始运行

1.2.4. 居中如何实现（主组件的样式设置）

主页面的V logo 是怎么设置的？
在 App.vue 的style样式设置中

1.2.5. 小结

学习了vuecli基本的文档结构，掌握了页面跳转的基本方法
基本的安装和卸载

1.3. vue-cli3

1.3.1. 手动搭建vue-cli环境

步骤
安装依赖 npm install/ cnpm install
初始化 npm init -f/ cnpm init -f
安装组件，并查看安装后的内容
具体流程如下：
创建文件夹
进入文件夹，安装依赖 npm install
初始化 npm init -f，会生成 package.json 的文件
安装router到开发环境，npn i vue-router -D/--save-dve，就会新增一个 node_modules 的文件夹
- 如果是全局安装，会安装到nodejs文件夹中的 node_modules文件夹
cd no*，进入到以 no 开头的文件夹

1.3.2. 卸载vue-cli2，并安装vue-cli3

重新打开一个控制台，运行 npm uni/uninstall vue-cli -g
如果运行 vue -V 仍能查找到版本号，则使用 cnpm 再卸载一次
安装vue-cli3
普通安装：npm install -g @vue/cli
淘宝镜像：cnpm install -g @vue/cli

1.3.3. vue-cli3图形界面

在控制台输入 vue ui，便可以进入ui界面

1.3.4. vue-cli3创建项目

首先创建新的文件夹，md test3，然后进入 cd test3
创建新的工程 vue create test3
用上下键来选择 default(babel,eslint)或者(Manually select features)
我们选择后面的一项，然后可以进入选择更多的插件
用上下键选择到某一个项，然后按空格键选择，去掉Linter（这里的eslint规范，初期先不加进去，不然会有很多格式的报错），选择后回车
选择history mode for router为 yes
placing config for Babel,ESLint,etc,选择 package.json，这里需要按方向键调整
回车到开始安装
安装结束后，系统系统， cd test3, npm run serve
App running at:
Local: http://localhost:8080/
Network: http://172.31.226.37:8080/
上面是localhost
下面是本机配置的局域网IP地址

1.3.5. 项目目录结构

vue-cli3和vue-cli2有较大区别
主要源程序还是在 src目录结构下， src下的components主要存放组件，views下主要存放视图

1.3.6. vue-cli3导入其他项目

先进入原来的test1工程的文件夹下
安装依赖 npm install
启动 npm run serve，会出现错误
运行 npm run dev，可以正常运行

1.3.7. vue-cli3创建新项目案例

进入 test3/test3
启动 npm run serve
开始修改项目
先在 components文件夹下创建新的组件 first.vue

<template>
    <div>
        <router-link to="">转向A组件/页面></router-link>
        <router-link to="">转向B组件/页面></router-link>
    </div>
</template>

在router 文件夹下的index.js中导入并使用

import First from '../components/first.vue'

const routes = [
  {
    path: '/',
    //name: 'home',
    component: First
  },
  ... //省略部分代码
]

要注意注释掉原来 Home 的路由
在components文件夹下添加要跳转的 A、B组件

<template>
    <div>AAAAAAAAAAAAA
      <router-link to="/">返回主页</router-link>  //router-link在div标签中
    </div>
</template>

按照上面同样的方法在 index.js 中导入并使用

import A from '../components/A.vue'
const routes = [
  {
    path: '/a',  //要修改这里的 path
    //name: 'home',
    component: A
  },
  ... //省略部分代码
]

原来的first.vue中添加跳转的路径

<template>
    <div>
        <router-link to="/a">转向A组件/页面></router-link>
        <router-link to="/b">转向B组件/页面></router-link>
    </div>
</template>

1.3.8. 嵌套路由

首先找到要嵌套的页面，这里是在首页，修改router下index.js的内容
在First首页路由中添加 children项，然后把 A，B两个路由项剪切过来

const routes = [
  {
    path: '/',  //要修改这里的 path
    //name: 'first',
    component: First,
    children: [
      {
        path: '/a',  //要修改这里的 path
        //name: 'home',
        component: A
      },
      {
        path: '/b',  //要修改这里的 path
        //name: 'home',
        component: B
      }
    ]
  },
  ... //省略部分代码
]

修改主页first.vue中的内容，凡是作为不跳转的页面，都需要设置一个挂载点
添加

<template>
    <div>
        <router-link to="/a">转向A组件/页面></router-link>
        <router-link to="/b">转向B组件/页面></router-link>
        <router-view></router-view>
    </div>
</template>

1.3.9. vue-cli3添加样式的三种方式

直接在组件页面中添加<style>--内部样式表
使用外部样式表，在public文件夹中创建样式文件ys1.css
在first.vue文件中导入，替换原来内部样式表的部分，为 @import "路径名"

1.4. vue-cli3项目案例需求分析

主要使用技术
组件及组件间传值
axios实现读取json数据：商品的数据源存放于json中
css相关技术进行布局：布局、间距等样式
使用views页面级组件，使用router设置页面
在testcli文件夹下创建新的工程 proj，vue create proj

1.4.1. 页面初始化

将img文件夹放在public文件夹下，需要的图片素材放在img中
项目结构
components文件夹放一些小组件
将小组件组合起来最终是用view文件夹中的页面去呈现
兄弟组件间传值可以使用 事件总线
在assets/components文件夹下创建事件总线
创建名为 msg.vue 的事件总线文件，代码如下：

import Vue from 'vue'
export default new Vue
// 当做是公共的来做参数传递

在要放置各个组件的主页面First.vue中，导入各个组件，在末尾添加script标签

<script type="text/javascript">
  import Left from '../components/Left.vue'
  import Right from '../components/Right.vue'
  export default {
    components: {
      Left,
      Right
    }
  }    
</script>

然后在 First.vue页面的适当位置使用<Left>/<Right>标签插入相关的组件

1.4.2. 实现左边固定导航栏，右边页面随不同导航变化

因为左侧有多个导航菜单键，右边只有一个页面去显示变化，所以要实现 组件复用 的功能。
首先给左边导航的li添加事件，<li @click="menu1">服饰</li><li @click="menu2">家电</li>
然后在Left.vue文件下面写上 script 脚本

<script type="text/javascript">
  import Msg from './msg.vue'
  export default {
    methods: {
      menu1:function() {
        Msg.$emit("val","1");  //通过 emit 触发 Msg的on事件，将1的值赋给val，触发到on
      },
      menu2:function() {
        Msg.$emit("val","2");  //通过 emit 触发 Msg的on事件，将1的值赋给val，触发到on
      }
    }
  }
</script>

vue文件中如果要添加脚本，script放在最后，其中 export default{} 是必须要写的，不然没法显示出来。
在 Right.vue 文件中去接受相应的值

<template>
  <div>
    {{kk}}
  </div>
</template>
<script type="text/javascript">
import Msg from './msg.vue'  //左右vue文件都要引入这个事件总线的代码
export default {
  data() {
    return {
      kk: 0
    }
  },
  mouted: function() {
      var _this = this;  //右边的this代表当前vue本身，也就是 kk 的数据，左边是this的副本
      Msg.$on('val',function(m){
        this.kk = m;   //错误，这里this表示的是 on 事件中的内容，不再是当前vue，所以找不到 kk，所以使用 _this
        _this.kk = m;
      })     //使用 on 来接收，val是另一个文件传过来的值，接受的值传给 m
  }
}
</script>

这里有个坑：事件总线这里命令为 Msg.vue，但其实应该命名为 Msg.js，所以任何引用到该文件的地方都需要修改为 Msg.js

1.4.3. 扩展右侧导航栏

原来只有一个页面的显示，这里重新修改扩展右侧导航栏

<template>
  <div>
    <div v-if="kk==1">
      1111111111111
    </div>
    <div v-if="kk==2">
      2222222222222
    </div>
    <div v-if="kk==3">
      3333333333333
    </div>
    <div v-if="kk==4">
      4444444444444
    </div>
  </div>
</template>
<script type="text/javascript">
... 同上
</script>

1.4.4. axios 处理json数据

安装命令 npm i axios -S，这样就安装到生产环境中去了
然后在 main.js 中来引用 import axios from 'axios'
并全局注册该插件，还是在 main.js 文件中， Vue.prototype.$http = axios，这样以后要使用该插件，就是使用 $http，也可以命名为 $axios
然后在 Right.vue 中开始使用。
首先准备 json 数据，可以在public文件夹下新建 json 文件夹，新建bjb.json，存放数据如下：

[
  {
    "goodName": "联想1",
    "img": "img/bjb1.jpg"
  },
  {
    "goodName": "联想2",
    "img": "img/bjb2.jpg"
  },
  {
    "goodName": "联想3",
    "img": "img/bjb3.jpg"
  },
]

在components文件夹下面创建 goodsList.vue

<template>
  <div name="show">
    <ul>
      <li v-for="goods in list">
        <img v-bind:src="goods.img">   //要把json中的数据存放到 list 中 
        <p>{{good.goodName}}</p>    //img和goodName是json数据中的键的名字
      </li> 
    </ul>
  </div>
</template>
<script>
  export default {
    name: "show",
    data() {
      var obj = this;
      this.$http.get("json/bjb.json").then(function(res){
        obj.list = res.data;  // 这里的 list 是上面 v-for 中的list
      })    // $http 是上面注册好的
      return {
        list: []
      }
    }
  }
</script>

goodsList.vue需要在Right.vue中使用，所以在 Right.vue 中编写相关的代码
首先导入相关文件 import GoodList from './goodList.vue'
然后进行组件的注册，在export default中新增一项 javascript components: [ GoodList ]
使用 <GoodList> 替换原来的 11111111111/22222222222等
然后在 goodList.vue文件中，添加相应的样式来使得页面正常显示

1.4.5. 多个导航功能实现

上一次中，Right.vue是父组件，goodsList.vue是子组件，这里先来实现父子组件的传值
在 Right.vue 中添加代码
<GoodList :goodId="1"></GoodList> //在调用 GoodList 的时候，会传递参数 goodId，值为 1
在goodsList中接收
在export default中添加一项

props: {
  goodId: Number
}
watch: {   //watch 监听父组件到子组件传值的参数,goodId值发生改变，就会被 watch 捕捉到
  goodId() {
    var obj = this;
    var url = "";
    if( obj.goodId == 1) {  // 表示单击的是第一项
      url = "json/bjb.json"
    } else if(obj.goodId == 2) {
      url = "json/shouji.json"   //根据点击导航栏菜单的不同，选择不同的json文件
    }
    this.$http.get(url).then(function(res){  //这里的get就是用变量的写法，url的值传给 res
      obj.list = res.data;
    })
    return {
      list: []
    }
  }
}

同时要修改上面 data() 部分的代码，增加判断语句然后给 url 赋予不同的 json 数据

1.4.6. 解决刷新以及初始化显示的问题

上面需要点击导航栏的菜单项才会显示出来，这里给它添加一个默认显示的项
只需要在上面的 data 和 watch 函数中添加一个 else

watch: {   //watch 监听父组件到子组件传值的参数,goodId值发生改变，就会被 watch 捕捉到
  goodId() {
    var obj = this;
    var url = "";
    if( obj.goodId == 1) {  // 表示单击的是第一项
      url = "json/bjb.json"
    } else if(obj.goodId == 2) {
      url = "json/shouji.json"   //根据点击导航栏菜单的不同，选择不同的json文件
    } else {  // 上面 goodId==0 就通过这里处理
      url = "json/bji.json"   //这里可以显示默认的页面  
    }
    this.$http.get(url).then(function(res){  //这里的get就是用变量的写法，url的值传给 res
      obj.list = res.data;
    })
    return {
      list: []
    }
  }
}

然后修改 Right.vue 文件

<template>
  <div>
    <div v-if="kk==1">
      <GoodList :goodId="1"> </GoodList>
    </div>
    <div v-else-if="kk==2">
      <GoodList :goodId="2"> </GoodList>
    </div>
    <div v-else-if="kk==3">
      3333333333333
    </div>
    <div v-else-if="kk==4">
      4444444444444
    </div>
    <div v-else>   //除了以上之外，才是下面0的显示
      <GoodList :goodId="0"></GoodList>
    </div>
  </div>
</template>
<script type="text/javascript">
... 同上
</script>