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>

效果图如下。

相关推荐
用户516816614584119 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦19 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He19 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化