前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Vue 脚手架CLI 初始化项目

Vue 脚手架CLI 初始化项目

原创
作者头像
有勇气的牛排
发布于 2023-06-25 15:31:38
发布于 2023-06-25 15:31:38
17100
代码可运行
举报
运行总次数:0
代码可运行

1 介绍

  • CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架。
  • Vue CLI是一个官方发布vue.js项目脚手架
  • 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。
  • 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置

2 Vue CLI使用前提 Webpack

Vue.js官方脚手架工具就使用了webpack模板

  • 对所有的资源会压缩等优化操作
  • 它在开发的过程中提供了一套完整的功能,能够使得我们开发过程变得高效

Webpack全局安装

代码语言:shell
AI代码解释
复制
npm install webpack -g

3 Vue CLI安装

https://cli.vuejs.org/zh/guide/

3.1 安装脚手架3.x

安装Vue脚手架(全局)

代码语言:shell
AI代码解释
复制
# 脚手架3.x(后面拉一个模板就能用2)
npm install -g @vue/cli

注意:上面安装的是Vue CLI3的版本,如果需要按照Vue CLI2的方式初始化项目时不可以的

查看版本

代码语言:shell
AI代码解释
复制
vue --version

Vue CLI3.x初始化项目

代码语言:shell
AI代码解释
复制
vue create my-project

3.2 拉取脚手架2.x

拉取脚手架2.x官方教程

代码语言:shell
AI代码解释
复制
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI2初始化项目

代码语言:shell
AI代码解释
复制
vue init webpack my-project

4 常用命令

打包项目

代码语言:shell
AI代码解释
复制
npm run build

运行项目

代码语言:shell
AI代码解释
复制
npm run serve

6 其他常用文件

.editorconfig

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 编辑器配置
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.eslintrc

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// https://eslint.org/docs/user-guide/configuring
// eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,
// 如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    // 'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "no-unused-vars": 'off',  // 关掉语法检查
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

5 实战

  • "vue": "^2.6.11"( package.json中 )
  • @vue/cli 4.5.15( vue -V 查看 )

创建项目

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
vue create my-project

修改 package.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"dependencies": {
    // 修改下面
    "vue": "^2.6.11",
},
"devDependencies": {
    // 修改下面
    "vue-template-compiler": "^2.6.11"
}

修改main.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 饿了么
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

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

router/index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Vue from 'vue'
import VueRouter from 'vue-router'

// import Test from "../views/Test";

Vue.use(VueRouter)

const routes = [
  //  component: () => import('../views/Ajax.vue')
  {
    path: '/',
    name: 'Test',
    component: () => import('../views/Test.vue')
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

7 第三方安装

vue-router

代码语言:text
AI代码解释
复制
npm install --save vue-router

axios

代码语言:text
AI代码解释
复制
npm install --save axios

饿了么

代码语言:text
AI代码解释
复制
npm i element-ui -S
npm install --save element-ui

echarts

Vue引用echarts图表

代码语言:text
AI代码解释
复制
npm install echarts --save

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
用 LangChain 构建文档问答助手
随着大语言模型(LLM)的广泛应用,越来越多企业和个人希望利用它来实现“基于文档的智能问答”功能。例如:
IT蜗壳-Tango
2025/04/09
1180
使用​​langchain​​搭建自己的本地知识库系统
RAG 是retrieval-augmented-generation的缩写,翻译为中文的意思就检索增强,以基于最新,最准确的数据建立LLM 的语料知识库。
用户1418987
2024/09/06
7090
使用​​langchain​​搭建自己的本地知识库系统
如何评估 RAG 应用的质量?最典型的方法论和评估工具都在这里了
随着 LLM(Large Language Model)的应用逐渐普及,人们对 RAG(Retrieval Augmented Generation)场景的关注也越来越多。然而,如何定量评估 RAG 应用的质量一直以来都是一个前沿课题。
Zilliz RDS
2024/01/04
6.1K0
如何评估 RAG 应用的质量?最典型的方法论和评估工具都在这里了
教程:使用 Chroma 和 OpenAI 构建自定义问答机器人
翻译自 Tutorial: Use Chroma and OpenAI to Build a Custom Q&A Bot 。
云云众生s
2024/03/27
5800
教程:使用 Chroma 和 OpenAI 构建自定义问答机器人
使用知识图谱实现 RAG 应用
《福布斯》最近将 RAG 应用程序评为人工智能领域最热门的事物。这并不奇怪,因为检索增强生成需要最少的代码,并有助于建立用户对大语言模型的信任。构建出色的 RAG 应用程序或聊天机器人时面临的挑战是处理结构化文本和非结构化文本。
大数据杂货铺
2024/04/03
1.4K1
使用知识图谱实现 RAG 应用
检索增强生成(RAG)
检索增强生成(Retrieval-Augmented Generation, RAG)是一种结合了检索机制和生成模型的先进技术,旨在提高自然语言处理系统的准确性和上下文相关性。本文将详细介绍如何从零开始构建一个RAG系统,包括数据处理、检索、生成以及部署等各个环节。
@小森
2025/01/03
3080
RAG实操教程langchain+Milvus向量数据库创建你的本地知识库
RAG 是retrieval-augmented-generation的缩写,翻译为中文的意思就检索增强,以基于最新,最准确的数据建立LLM 的语料知识库。
用户1418987
2024/09/06
1.5K0
RAG实操教程langchain+Milvus向量数据库创建你的本地知识库
利用知识图谱提高 RAG 应用的准确性
在 RAG 应用中使用 Neo4j 和 LangChain 构建和检索知识图谱信息的实用指南
大数据杂货铺
2024/04/02
8060
利用知识图谱提高 RAG 应用的准确性
5 分钟内搭建一个免费问答机器人:Milvus + LangChain
答案是 5 分钟。只需借助开源的 RAG 技术栈、LangChain 以及好用的向量数据库 Milvus。必须要强调的是,该问答机器人的成本很低,因为我们在召回、评估和开发迭代的过程中不需要调用大语言模型 API,只有在最后一步——生成最终问答结果的时候会调用到 1 次 API。
Zilliz RDS
2023/12/26
1.8K0
5 分钟内搭建一个免费问答机器人:Milvus + LangChain
一百行代码实现自己的RAG知识库
本人日常工作需要对接各种第三方合作方,对接过程中的文档繁多、沟通不及时、问题排查繁琐以及工作具有重复性等问题愈发明显。合作方遇到对接问题需要提工单经门户网站-->产品部门接口人-->开发人员问题排查/修复-->产品部门接口人-->合作方收到回复,这种模式联调、验收流程较长。
CoderJia
2024/10/18
2860
一百行代码实现自己的RAG知识库
检索增强生成(RAG)实践:基于LlamaIndex和Qwen1.5搭建智能问答系统
LLM 会产生误导性的 “幻觉”,依赖的信息可能过时,处理特定知识时效率不高,缺乏专业领域的深度洞察,同时在推理能力上也有所欠缺。
汀丶人工智能
2024/05/07
4.1K0
检索增强生成(RAG)实践:基于LlamaIndex和Qwen1.5搭建智能问答系统
从API到Agent:万字长文洞悉LangChain工程化设计
我想做一个尝试,看看能不能用尽量清晰的逻辑,给“AI外行人士”(当然,我也是……)引入一下LangChain,试着从工程角度去理解LangChain的设计和使用。同时大家也可以将此文档作为LangChain的“10分钟快速上手”手册,本意是希望帮助需要的同学实现AI工程的Bootstrap。
GeaFlow
2024/03/18
1.2K1
从API到Agent:万字长文洞悉LangChain工程化设计
直观易用的大模型开发框架LangChain,你会了没?
目前LangChain框架在集团大模型接入手册中的学习案例有限,为了让大家可以快速系统地了解LangChain大模型框架并开发,产出此文章。本文章包含了LangChain的简介、基本组件和可跑的代码案例(包含Embedding、Completion、Chat三种功能模型声明)。
京东技术
2024/04/18
7910
直观易用的大模型开发框架LangChain,你会了没?
5分钟玩转PDF聊天机器人!超简单的Langchain+ChatGPT实现攻略
“ 本文介绍一个使用Langchain 结合向量数据库和大模型构建PDF聊天机器人的思路,这个简单的聊天机器人原型证明了从非结构化文档中提取信息,以进行问答的可行性。在此基础上,我们可以继续优化算法,扩大文档来源,提升问答的准确性与友好性。”
技术人生黄勇
2024/07/19
2400
5分钟玩转PDF聊天机器人!超简单的Langchain+ChatGPT实现攻略
langchain中的召回增强生成(RAG)一览
RAG是一种通过额外的、通常是私有或实时的数据来增强LLM知识的技术。LLM能够推理各种广泛的主题,但它们的知识仅限于它们训练时的公共数据,到达其特定时间节点为止。如果你想构建可以推理私人数据或在模型截止日期之后引入的数据的人工智能应用程序,你需要用特定信息增强模型的知识。将适当的信息带入并插入到模型提示中的过程被称为“检索增强生成”(RAG)。
山行AI
2023/12/12
4.5K0
langchain中的召回增强生成(RAG)一览
RAG 修炼手册|如何评估 RAG 应用?
如果你是一名用户,拥有两个不同的 RAG 应用,如何评判哪个更好?对于开发者而言,如何定量迭代提升你的 RAG 应用的性能?
Zilliz RDS
2024/04/25
7910
RAG 修炼手册|如何评估 RAG 应用?
LLM RAG系列
本文介绍了RAG以及RAG pipeline的整个流程,包括请求转换、路由和请求构造、索引和检索、生成和评估等,其中引用了大量有价值的论文。
charlieroro
2024/04/02
8200
LLM RAG系列
Jina AI + Milvus Lite:搭建 RAG 问答机器人
开发人员特别重视那些易于设置、启动迅速且能在生产环境中无缝扩展的基础组件。针对这一需求,我们推出了最新的轻量级向量数据库产品——Milvus Lite。对于 Python 开发者而言,Milvus Lite 是一个极具价值的工具,尤其适用于追求高质量、易用性的搜索应用。
Zilliz RDS
2024/06/25
4510
Jina AI + Milvus Lite:搭建 RAG 问答机器人
手把手系列!无需 OpenAI 即可搭建 RAG 应用
接下来我将用 Nebula(https://symbl.ai/platform/nebula/llm/)替代 OpenAI,Hugging Face 上的 Embedding 向量模型代替 OpenAI 模型。
Zilliz RDS
2024/01/30
9360
手把手系列!无需 OpenAI 即可搭建 RAG 应用
大模型系列——解读RAG
RAG 是2023年最流行的基于 LLM 的应用系统架构。有许多产品几乎完全建立在 RAG 之上,覆盖了结合网络搜索引擎和 LLM 的问答服务,到成千上万个数据聊天的应用程序。很多人将RAG和Agent 作为大模型应用的两种主流架构,但什么是RAG呢?RAG又涉及了哪些具体的技术呢?
半吊子全栈工匠
2024/02/06
20K1
大模型系列——解读RAG
相关推荐
用 LangChain 构建文档问答助手
更多 >
LV.0
这个人很懒,什么都没有留下~
目录
  • 1 介绍
  • 2 Vue CLI使用前提 Webpack
  • 3 Vue CLI安装
    • 3.1 安装脚手架3.x
    • 3.2 拉取脚手架2.x
  • 4 常用命令
  • 6 其他常用文件
  • 5 实战
  • 7 第三方安装
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档