使用vscode的vue文件架构的设计，常用的vue插件与脚手架创建工程

最新推荐文章于 2024-09-25 00:05:30 发布

飞飞笨笨

最新推荐文章于 2024-09-25 00:05:30 发布

阅读量353

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_41525746/article/details/110265470

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vscode开发vue推荐的插件

设置为中文语言环境

win【ctrl+shift+p】

mac+【command+shift+p】

在弹出的搜索框中输入【configure language】，然后选择搜索出来的【Configure Display Language】

vetur 插件: vue文件基本语法的高亮插件

setting.json添加配置

eslint插件:智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误

setting.json添加配置

最终配置
{
    "emmet.syntaxProfiles": {
           "vue-html": "html",
           "vue": "html"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins":["html"]
    }
}
VsCode代码快捷键：Vue 2 Snippets 、 Vue Peek

本地搭建Vue 、CLI相关框架

什么是VUE 一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合. 文档：https://cn.vuejs.org/

安装新版Vue (直接使用 cli)
 npm install vue (可以不用)
什么是VUE-CLI Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架

安装新版vue-cli
cnpm install -g @vue/cli

cnpm install -g @vue/cli-init
使用vue-cli创建项目（测试项目，验证vue环境）
vue create my-project

vue开发中常用的技术组件依赖

Vue: 用于构建用户界面的渐进式JavaScript框架

Vuex: 在Vue项目开发时使用的状态管理工具,它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

state：存储数据
mutations：同步修改存储数据
actions: 异步修改存储数据
getters：获取存储数据前进行修改

Axios: 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

从浏览器中创建 XMLHttpRequest,也可以 node.js 发出 http 请求，
支持 Promise API
支持拦截请求和响应，并转换数据

vue-router：Vue官方的路由管理器，实现页面前端路由 Hash模式（默认）： History模式：

element-ui：基于 Vue.js 实现的pc端组件库

mockjs：模拟数据请求

node-sass：是一个项目依赖，在一个项目中在使用sass语法的时候，必须通过sass-loader来解析sass，从而使sass语法变成浏览器能够识别的CSS语法，而node-sass模块就是对sass-loader的支持模块，所以不安装node-sass，sass-loader就不能正常工作。sass（可以快速进行css样式编写不需要注意css层级关系）

vue-lazyload：图片懒加载组件

vue-awesome-swiper：轮播图组件

vue-cookie：这是一个简单的Vue.js插件，专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在

vue-axios：可以封装到vue对象中直接使用axios请求数据

eslint：管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的和标准的

vue-cli：脚手架可以快速构建模块化vue项目

使用vue脚手架快速构建项目

1.使用命令创建项目
vue create xdclass_front

2.选择配置

选择Vue版本2还是3的默认配置，一般选最后一个自定义

3.自定义选择配置，需要什么就选什么

choose vue version 选择vue的版本是2还是3

Babel，将es6转换成es5，必选

TypeScript，javascript的超集

progressive web app （PWA） support 渐进式网络应用程序

vue-router，这是官方的路由，大多数情况下都使用

vuex，状态管理

css pre-processors CSS预处理

Linter/formatter使用eslint校验格式

unit tests单元测试

e2e测试

4.选择vue的版本

5. 是否使用带历史纪录的路由，这里一般是Y

6.预编译器选择什么

css的预编译器，若选择sass方式推荐使用dart-sass

7.eslint配置，一般第4个自定义创建一个规则，如果是多人开发只需要将webspace setting.json上传到git即可统一化格式配置

8.什么时候eslint检测，第一个保存时

设置保存的时候进行检测

9.依赖存放与哪个文件下，当然是package.json

10.保存此次配置

保存的配置名