note_前端框架Vue的安装和简单入门(Windows 11)

1. Vue安装

(1) 下载安装node.js和npm

bash 复制代码
# 下载msi安装包
https://nodejs.org/en

# 点击安装包,按提示安装
# 默认安装nodejs, npm, 在线文档; PATH配置

# 确认安装是否成功,在dos中输入
node -v    # 验证nodejs是否安装成功
npm -v     # 验证nodejs包管理器npm是否安装成功

# 配置npm
npm config set registry=http://registry.npm.taobao.org         #设置淘宝镜像
#npm config set cache "D:\<install_path_nodejs>\node_cache"    #设置缓存文件夹
#npm config set cache "D:\<install_path_nodejs>\node_cache"    #设置全局模块存放文件夹

(2) 使用npm下载安装vue

bash 复制代码
npm install @vue/cli -g 

2. 用例1. 项目创建和运行

2.1 创建Vue项目

bash 复制代码
# 创建新项目
vue init webpack test01
    #[error-1] Command vue init requires a global addon to be installed. ...先执行以下命令:
        #npm i -g "@vue/cli-init"
    #[error-2] vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443
        # npm install --save-dev webpack

下面两张图分别展示了项目的创建过程(图1)和创建完成后的目录文件(图2)。

图1. 执行web init webpackage后需要依次配置的选项。包括项目名、项目简介、作者、build类型、是否安装vue-router、是否使用ESLint检查代码、ESLint类型、是否设置单元测试、单元测试框架、是否用nightwatch框架设置端到端测试、是否运行npm install

图2. 创建的项目文件。

2.2 项目运行

bash 复制代码
# 运行项目
cd test01
npm run dev

# 打包
#npm run build 

打开浏览器,输入localhost:8080,得到以下页面,则启动成功。
图3. 默认主页。

3. 用例2. 使用iview组件创建一个表格

bash 复制代码
# 安装iview组件
npm install view-design --save

# 在main.js导入iview
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.use(ViewUI)

# 在router/index.js添加路由
{
      path: '/table',
      name: 'table',
      component: () => import('../components/table')
}

然后在components/下新建table.vue

html 复制代码
# 代码修改至:https://blog.csdn.net/weixin_44791115/article/details/101451458
<template>
  <div>
    <div class='input-wrap'>
      <Input
        search
        v-model='searchVal'
        placeholder='请输入查询内容...'
        @input='autosearch'
        style='width: auto'
      />
      <i-button type='dashed' class='reset' @click='resetDate'>重置</i-button>
    </div>
    <br />
    <Table border :columns='columns' :data='showList'></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchVal: '',
      showList: [],
      newList: [],
      columns: [
        {title: '报名日期', key: 'date'},
        {title: '姓名', key: 'name'},
        {title: '学号', key: 'studentId'},
        {title: '邮箱', key: 'email'}
      ],
      mockList: [
        {date: '2019-09-26', name: '张约翰', studentId: 2033126027, email: 'john@mail.edu.cn'},
        {date: '2018-09-26', name: '李皮特', studentId: 2022083356, email: 'peter@mail.edu.cn'},
        {date: '2017-09-26', name: 'Hsu yiqi', studentId: 2016127206, email: 'yiqi@mail.edu.cn'}
      ]
    }
  },

  mounted() {
    this.showList = this.mockList
  },
  methods: {
    autosearch() {
      if (this.searchVal !== '') {
        this.newList = this.mockList.filter(
          item =>
            item.email.indexOf(this.searchVal) !== -1 ||
            item.date.indexOf(this.searchVal) !== -1 ||
            item.name.indexOf(this.searchVal) !== -1 ||
            item.studentId.toString().indexOf(this.searchVal) !== -1
        )
        if (this.newList) {
          this.showList = this.newList
        }
      }
    },
    resetDate() {
      this.searchVal = ''
      this.showList = this.mockList
    }
  }
}
</script>

效果图如下。

相关推荐
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
影子信息8 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月8 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu8 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20188 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿8 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘8 小时前
vue文本插值
javascript·vue.js·ecmascript
华子w9089258598 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
老家的回忆10 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf