前言

vue是一套用于构建用户界面的渐进式框架。我使用vue最直观的感受就是它组件化开发的高效率和高复用。接下来我将讲述从从零搭建vue框架。以下观点带有个人理解，有不对的地方请指正。

环境需求

在我们创建vue项目之前我们需要的环境配置

Node.js : Javascript运行环境
npm ：包管理工具（同Node.js一同安装）
vue.js : 官方命令行工具 npm install vue -g
wepack : 前端资源加载、打包工具 npm install webpack -g

vue全家桶

了解vue全家桶对我们创建项目的帮助是巨大的，以下是我个人都vue全家桶的理解

vue-router : 路由管理，主要用于多界面网页应用，如果界面和功能较少的网页可无需安装
vuex : 用于数据的缓存管理，针对数据使用频繁和数据多的场景
vue-resource：用于请求和响应处理，我们一般不使用它，更倾向于使用 axios 代替
vue-cli ：官方命令行工具
sass ：css 扩展语言，可以帮助我们减少 css 重复的代码，节省开发时间

安装流程及配置

这里我使用的是vscode，其他方式安装流程大致相同

1.创建项目 vue create 项目名称

2.选择配置

这是我根据自己需求进行的配置，其中第二点我在后面会详细讲解，其他的大家可以根据需求自行选择

Please pick a preset 选择默认配置或者手动配置，此处我选的手动配置

Check the features needed for your project vue的一些配置选择，后面我会详细讲解

Choose a version of Vue.js that you want to start the project with 选择的vue版本

Use history mode for router router的模式选择，根据需要选择，我选的NO

Pick a linter / formatter config 代码样式规范选择

Pick additional lint features 进行语法检查操作选择

Where do you prefer placing config for Babel, ESLint, etc. 放置配置信息的文件夹选择

Save this as a preset for future projects 是否需要将以上配置作为以后项目的预配置

3.这是配置过程的第二点，在这里我会详细讲解

Choose Vue version vue版本选择

Babel      是否兼容低版本浏览器

TypeScript 是否扩展JavaScript

Progressive Web App (PWA) Support 是否支持渐进式Web应用程序

Router   是否配置路由

Vuex   是否配置状态管理模式（相当于本地存储）

CSS Pre-processors 是否配置CSS预处理器

Linter / Formatter 格式化程序规范选择

Unit Testing   是否创建单元测试

E2E Testing 是否创建端到端测试

总结

在终端运行 npm run serve （这里的命令是针对 vue3, 选 vue2 版本的应该是 npm run dev ） 就可以在浏览器打开你的vue项目。

好了，完成上述配置就可以开启你的vue之旅了。

vue项目创建及配置选择相关推荐

vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...
Vue脚手架安装与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功项目文件作用介绍快捷安装项目所需依赖命令 npm i Vu ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
Vue脚手架搭建及vue项目创建【详细教程】
目录 Vue脚手架环境安装 Vue项目创建 Vue项目目录结构项目运行流程组件结构 Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具 ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Node.js、npm环境配置与Vue项目创建
目录一.Node.js.npm简介 1. Node.js 2. npm 3. npm和Node.js的发展二.Node.js(内置npm)的下载与安装三.Vue CLI脚手架的安装与项目的创建: ...
Vue入门：Vue项目创建及启动
1. 创建Vue项目存放地址用于存放Vue项目,找个自己处理方便的地方.本人地址:D:\Program Files\Workspace\Vue 2. 创建项目进入cmd窗口进入项目存放地址执行 ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...

vue项目创建及配置选择

前言

环境需求

vue全家桶

安装流程及配置

总结

vue项目创建及配置选择相关推荐

最新文章

热门文章