Vue2.x脚手架初始化配置环节

最新推荐文章于 2023-09-29 22:26:58 发布
最新推荐文章于 2023-09-29 22:26:58 发布
阅读量137 收藏
点赞数
分类专栏： Vue2.x 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46013619/article/details/119549584
版权
本文介绍了如何使用vue-cli搭建Vue2.x项目，包括安装vue-cli，创建自定义配置的项目，选择Router、Vuex、ESlint+Prettier，以及设置Lint on save。最后通过yarn serve启动项目，确保其正常运行。
摘要由CSDN通过智能技术生成

创建Vue2.x脚手架

  1. 安装vue-cli，移步Vue-cli官网
npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成可参考vue --version查看版本是否安装成功

  1. 运行以下命令来创建一个新项目
vue create hello-world

安装步骤如下：

  • 这里我们选择自定义

在这里插入图片描述

  • 这里我们选择自定义Router、Vuex

在这里插入图片描述

  • 这里演示Vue2

  • 我们选择ESlint + Prettier

在这里插入图片描述

  • 这里我们选择Lint on save，后续我们会在vue.config.js配置文件中关闭

在这里插入图片描述

  • 这里我们选择形成单独配置文件

在这里插入图片描述
至此创建成功，使用yarn serve开启项目看启动是否正常

写bug的小气球
关注
专栏目录
vue-cli2.x 3.x 实现完美的移动端适配【完美还原设计图UI的方法】
cometang--唐家世少
05-07 1333
需求：自己经常会做移动端开发相关的项目，用了非常多的适配移动端的方法，其中包括有：最原始的百分比流式布局；类似bootstrap/element的栅格布局；css3的媒体查询（@media）+rem单位;利用js监听设备宽度动态实现加载不同的css文件；淘宝的flexible.js(不得不说淘宝的解决方案不错，但已经被淘宝弃用了)，现在最为流行的适配方案就是今天重点说的方法：通过vue脚手架的po...
vue2.x开发环境及vue-cli脚手架搭建
weixin_57918043的博客
02-27 238
vue是目前大热的前端框架，好用并且更新很快，本文分享了vue2.x开发环境及vue-cli脚手架搭建教程，新手友好。
vue-cli2脚手架初始化项目
qq_44712405的博客
07-12 342
一、安装node.js 下载路径：http://nodejs.cn/download/ 一路下一步就好 检查是否安装成功 node -v npm-v 二、vue-cli 脚手架安装 地址栏输入cmd 执行命令 npm install -g vue-cli 如果是vue-cli3，则执行npm install -g @vue/cli 三、初始化项...
vue学习笔记——vue-cli(2.x)脚手架的搭建
Coolinx的博客
12-07 800
vue学习笔记——vue-cli(2.x)脚手架的搭建 一、Node安装           Node官网下载按步骤下载安装即可，安装完之后在cmd中输入 node -v，若显示版本号，这说明安装成功。 二、安装vue-cli           在cmd中输入 npm install vue-cli -g         安装完成，输入 vue -V(注意此处V是大写)，查看版本号...
VUE2项目：尚品汇VUE-CLI脚手架初始化项目以及路由组件分析（一）
qq_41857955的博客
09-29 1075
完成一个VUE项目的逻辑，先画页面，拆分组件，数据动态展示，数据动态业务处理。同时创建一个组件，需要找准它的结构，样式，以及静态资源。放置静态资源文件，此文件夹中的静态文件资源在webpack打包的时候，会原封不动的打包到dist文件夹中。此项目使用上中下的结构，上部，底部的样式不变中间改变，中间的搜索部分可以拆出一个公共组件。用图中三个链接来做一下声明式导航的例子，点击对应的链接进入到相应的页面中，如点击图片进入首页。放置各个组件公用的静态资源，打包时，将其视作一个模块，打包到JS文件里面。
Vue脚手架2和3初始化项目的方式
科技向善
01-01 306
基于3.x和2.x版本的vue-cli脚手架搭建vue项目大全
jgujgu的博客
03-11 1002
首先我们电脑先安装vue脚手架 最好安装3.x的版本，3.x版本同时也可以创建2.x的项目； npm install -g @vue/cli 基于3.x版本的脚手架创建vue项目 1、基于 交互式命令 的方式，创建新版本vue项目 vue create my-project 出现这个是问你使用默认模版还是手动创建；（我一般会选第二个手动创建） 你可以自定义安装需要的功能，这里我安装了babel、router、linter（上下键移动位置，使用空格键来选中）然后回车下一步； 问你是否安装历史模式的路
详解使用vue-cli脚手架初始化Vue项目下的项目结构
11-28
它极大地简化了Vue项目的初始化和配置过程，为开发者提供了现代化的前端开发流程。Vue CLI支持快速创建新项目，内置热重载、静态检查等功能，并且能够生成适合生产环境的构建配置。 使用Vue CLI的优势主要包括以下...
基于vue3.x + typeScript 实现的组织架构图.zip
最新发布
01-16
6. 脚手架工具：Vue CLI是Vue3.x的官方脚手架，用于快速初始化项目，包括配置构建工具、设置typescript支持等，简化了项目的搭建过程。 7. 测试与调试：Vue3.x支持Jest或Mocha等测试框架，结合Vue Test Utils可以对...
Vue (10) — 初始化脚手架、ref属性、配置项props
m0_59897687的博客
12-13 826
一、初始化脚手架 1.说明 (1).Vue 脚手架是Vue 官方提供的标准化开发工具（开发平台）。 (2).最新的版本是 4.x。 (3).文档: https://cli.vuejs.org/zh/ 。 2.具体步骤 第一步（仅第一次执行）：全局安装@vue/cli。 npm install -g @vue/cli 第二步：切换到你要创建项目...
Vue2.x 源码 - 初始化：全局API
weixin_43299180的博客
11-05 1365
上一篇：Vue2.x 源码 - 初始化：实例挂载（$mount）的实现 Vue 类在定义之后第一次被引入包裹是在 src/core/index.js 文件里: //混入全局API initGlobalAPI(Vue) //响应式绑定服务端渲染相关属性和方法 Object.defineProperty(Vue.prototype, '$isServer', { get: isServerRendering }) Object.defineProperty(Vue.prototype, '$ssrCon.
vue2.x大屏适配 原稿适配
H的博客
01-11 412
npm install px2rem-loader -s npm install lib-flexible -s build下utils新增 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192, exclude: "/node_modules|element-ui" // 忽略文件夹 } } const loaders = options.usePostCSS .
Spring学习笔记4-配置文件
一片蓝蓝的云
10-02 195
一.前言 前面学习提到只讲到了xml文件配置，并未涉及到properties文件，其实xml文件和properties是同一种东西，只是表达形式不一样罢了，但一般情况下，xml文件用来添加改动的配置，properties文件用来配置不经常改变的配置，比如数据库等配置 二.xml文件 2.1 基础配置 xml文件的基础配置如下： <beans xmlns="http://www.springframework.org/schema/beans" <!--最基本的命名空间定义--&gt
vue2项目的初始化搭建流程
m0_67911008的博客
05-31 4337
文章旨在vue2项目的初始化搭建流程——包含vue-router，axios，vuex，element-ul配置。使用部分该文章vue2项目的初始化搭建流程是在node已经成功安装配置的条件下，不再展开赘述node的安装，环境配置。
VUE2安装初始化步骤（2022）
m0_67401228的博客
07-28 1192
下载安装node.js，win7使用node.jsv12版的（为目前通用，建议都是用这个版本），win10可以使用最新版本的。CLI至少要求v12版本的。node-v。
Vue2.x学习笔记
m0_46219714的博客
10-14 113
脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git版
Vue2.x - Vuex
程序员阿甘的博客
06-11 3303
Vuex学习总结
Vue学习之初始化脚手架
AtlantisPrincess的博客
06-05 424
Vue学习之脚手架初始化
vue2项目，vuex的安装与配置
weixin_45689946的博客
12-15 3602
一、介绍 官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 我的理解：可以理解为是 全局变量 安装： npm install vuex --save 接着在src下，新建一个store目录，store里再新建index.js和module目录，module目录里再存放你自己定义的模块（不懂没关系，博主下面会有代码让你复制粘贴） 我的目录: store/index.js文件： import V
用 Vue 2.x 版本的脚手架
05-19
可以使用 Vue CLI 2.x 版本来创建 Vue 2.x 项目的脚手架。 首先，你需要确保已经安装了 Node.js 和 npm。然后，打开命令行工具，输入以下命令来安装 Vue CLI 2.x： ``` npm install -g @vue/cli@2.x ``` 安装完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值