VUE前端项目学习

一、Vue-cli4脚手架搭建

1.1 安装nodejs

安装node和npm，安装了node之后就会自动安装npm。node官网

使用以下命令可以判断node和npm是否安装成功：

node -v
npm -v

如果成功打印版本号，即安装成功。

1.2 安装cnpm

cnpm是对包管理工具npm的一个封装，因为npm服务器在国外，所以国内用户下载较慢，由淘宝推出了一个使用国内镜像的cnpm，cnpm官网。安装如下：

sudo npm install cnpm -g --registry=https://registry.nlark.com #类unix系统需要加上sudo，windows则不用

1.3 安装vue-cli脚手架构建工具

安装命令如下：

cnpm install -g @vue/cli       #非指定版本
cnpm install -g @vue/cli@版本号 #指定版本

本次使用的vue-cli版本为4.5.15

1.4 创建项目

vue create 项目名称

项目名称中不能存在大些字母，可以有中划线和下划线。

二、Element ui的简单使用

导入elementui的css和js 可以通过cdn的方式导入，也可以通过本地文件的方式。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

在文件中导入了以上文件之后就可以使用elementUI的组件了。

三、在vue项目中引入ElementUI

在项目中安装elementUI

npm i element-ui -S

3.1 全局引入

在src/main.js文件中引入elementUI

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

3.2 局部引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

那么，如果只需要引入部分组件，就只需要在main.js中将ElementUI改为{ Button, 组件名 }，然后使用vue.use(Button)，每个组件都需要使用一遍。

四、路由的使用

4.1 安装vue-router

指定版本安装，这里好像只能使用npm安装，在使用cnpm安装好像失败了。

npm i vue-router@3.2.0

在main.js中引入我们创建的router文件夹，在new Vue({})传入。

import router from '../router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在项目根目录下创建router文件夹，用来存放路由相关的文件。

首先，创建一个index.js作为路由管理文件。在该文件中，引入vue和vue-router组件。并将vue-router组件配置到全局。即如下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

初始化一个VueRouter类，并给该实例赋值。routes是必须的。

const router = new VueRouter({
  mode: 'history', //模式
  routes: [
    {}
  ] //routes的参数下面再介绍
})

注意：这里VueRouter的属性是routes，不要写成routers，否则<router-view></router-view>标签加载不出来。<router-view>是展示路由模板内容的标签。

VueRouter中的routes属性是一个数组类型，该数组内存放的是多个对象，也就对应多个路由路径。基本配置为：

const routers = [
  {
    path: '/',  //路由路径
    name: 'Home',   //路由别名
    component: ()=>import('.vue文件路径') //也可以在文件开头引入
  }
]

<router-link>标签可以监听标签内带有事件的标签，比如按钮；该标签有一个to属性，后面可以根一个路由地址。

<router-link to="/">
  <el-button>按钮</el-button> //elementUI中的按钮组件
</<router-link>>

vue项目笔记