搭建Vue项目步骤

最新推荐文章于 2024-07-13 10:42:11 发布
最新推荐文章于 2024-07-13 10:42:11 发布
阅读量317 收藏 3
点赞数
分类专栏： 脚手架vue-cli 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44235792/article/details/106019066
版权

搭建Vue项目步骤

1、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    1. 可升级；
    2. 基于 webpack 构建，并带有合理的默认配置；
    3. 可以通过项目内的配置文件进行配置；
    4. 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

2、环境配置

2.1、Node.js

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
在这里插入图片描述
你可以运行这个命令来查看是否安装成功并且查看Node版本

node -v
2.2、v-cli3.0

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装新的包指令如下（由于我安装了Node.js，所以不适用Yarn）：

npm install -g @vue/cli

你可以用这个命令来检查其版本是否正确：

vue --version

3、搭建项目

这里搭建一个vue-project的Vue项目

vue create vue-project
# vue create 你的项目名

运行完会出现以下界面
在这里插入图片描述
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
上面是默认设置，这个默认的设置非常适合快速创建一个新项目的原型。如果选用这个方式，直接按下Enter键就可以创建一个Vue项目了。
在我们面向生产中一般我们用的都是手动设置，能够自定义一些我们需要的模块特性。

这里以Manually select features手动配置为例：

在这里插入图片描述
手动创建项目后选择安装功能，上下键移动，空格选中/取消：
从上往下的功能依次是：

  • Babel编译
  • TypeScript项目
  • 渐进式网络应用程序(小程序)
  • 使用Vue路由
  • Vue状态管理器
  • CSS预处理器
  • 代码检测和格式化
  • 单元测试
  • 端到端测试(E2E Testing)

我们一般会选择：Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试这些功能。

history路由

在这里插入图片描述
根据项目需要选择是、否。

CSS预处理器语言

在这里插入图片描述
选择第一条

ESLint的代码规范

在这里插入图片描述
选择第三条

何时进行代码检测

在这里插入图片描述
选择第一条在保存时检测

单元测试解决方案

在这里插入图片描述
选择第二条Jest

Babel、PostCSS、ESLint等配置文件存放位置

在这里插入图片描述
选择第一条单独保存在各自的配置文件中

是否存储当下配置模式（否）

在这里插入图片描述
如果选择是，下次创建项目时会自动沿用这次的配置。如果选择否，在下次创建项目时得重新选择配置。这里可以根据个人需求来选择是或否。

选择完的话按下Enter键就是等待Vue-cli完成初始化
在这里插入图片描述
出现以下图片中的情况代表安装完成
在这里插入图片描述
然后你就可以用电脑上的编辑器打开这个项目进行开发了。
执行 npm run serve 运行这个程序
在这里插入图片描述
在浏览器打开http://localhost:8080这个项目就跑起来了。
在这里插入图片描述

主要的目录结构
  • dist：打包好的工程目录默认地址
  • node_modules：node安装的依赖包
  • public：静态文件存放地
  • index.html:显示的主页面
  • src：vue文件主要编写地
  1. assets：静态资源js，css等存放地
  2. compnents：vue模块
  3. App.vue:主vue模块 引入其他模块
  4. main.js：页面程序入口，加载公共组件
  • package.json：模块基本信息项目开发所需要模块，版本，项目名称
  • package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个
    npm package的具体来源和版本号。
  • babel.config.js:babel是一个用来将ECMAScript 2015+的代码转换成旧版浏览器支持的版本的工具
  • .gitignore:git上传需要忽略的文件格式
Zander•Hwang
关注
专栏目录
vue项目搭建步骤
X_0419的博客
04-24 610
只是单纯进行记录，此步骤是在node.js和vue.js已经安装完成之后进行的，希望对大家也有所帮助。 vue项目搭建步骤 首先我们先创建一个demo文件，然后在路径出打出cmd，启动命令面板，在命令面板输入vue create myapp-web（myapp-web是随便起的名字） 输入之后按下回车键，会出现以下选项，我们选择第三个手动安装 接下来我们选择以下五个选项，按空格就可以选中，之后按下回车 接下来会有五个问题，我们依次选择以下选项，选完回车之后就可以等待项目创建了 接下来我们cd m
Vue搭建项目的流程
亚洲的博客
12-15 227
Vue项目的搭建流程 1、检查是否安装node node -v 2、检查是否安装vue vue -V 3、下载vue-cli框架 在这里我用的是命令窗口下载，还可以用可视化窗口下载 vue create demo //回车 在这里选择最后一个，手动选择功能，然后回车 在这里可以选择一些配置项，(Babel,Router,Vuex,CSS)，然后回车 上下键可以来回选择，空格键可以选中或取消选中 是否选用历史路由，我在这里选择no，然后回车 选用哪种css解析器，我在这里选择的是node-sa
【vue教程】一. 环境搭建与代码规范配置
最新发布
前端探索者
07-13 1569
Vue.js 是一个构建用户界面的`渐进式框架`，它设计简洁，易于上手，同时具备强大的功能来支持复杂的单页应用开发。本篇文章将作为我们 Vue 探索之旅的开篇，带领您了解 Vue 的基本概念，搭建 Vue 开发环境，并为后续深入学习打下坚实的基础。
vue项目搭建流程
qq_35216414的博客
06-18 1519
②components文件夹放置所有的子组件，即每个页面级组件的子组件，例如：index页面级组件，把它分为header、content、footer三部分，只要在components文件夹下新建一个index文件夹（为了区分其他组件），放入对应的子组件。（3）、更改router文件夹的index文件（根据项目需求，引入对应页面，配置路由信息，进行页面跳转）（ / 代表跟路径）注意下载的位数，默认是win10的64位，下载mac，win7，32位等可点击官网顶部的下载。
搭建一个vue项目(完整步骤)
weixin_40178803的博客
05-21 519
一、首先要安装一个node环境 下载地址为：https://nodejs.org/en/ 安装成功,w+r输入cmd命令,输入图中命令：如果输出版本号，说明我们安装node环境成功 安装淘宝镜像，输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。(建议使用) 输入cnpm -v,检查是否安装完成 二、搭建vue项目环境 全局安装vue-cli，np.
Vue构建一个项目
Serena_tz的博客
03-16 336
vue2.0 推荐开发环境 Homebrew 1.0.6(Mac) Node.js 6.7.0 npm 3.10.3 webpack 1.13.2 vue-cli 2.4.0 Atom 1.10.2 构建vue项目 1、下载node.js 下载地址：https://nodejs.org/en/ 检查是否安装成功：如果输出版本号，说明我们安装node环境成功 node是自带npm的，如果npm不是最新版本可以执行以下命令更新： $ npm install npm -g 大家都知道国内直接使用 np
webpack搭建vue 项目的步骤
11-27
【webpack搭建Vue项目的步骤】 在开始搭建Vue项目之前，确保你已经安装了必要的工具，包括`webpack`、`vue.js`、`npm`和`nodejs`。由于我们将使用`npm`来管理Vue项目，因此首先需要安装Node.js环境。安装完成后，...
9102年webpack4搭建vue项目的方法步骤
10-17
在本文中，我们将详细介绍如何在9102年使用webpack4来搭建一个Vue项目。Webpack 是一个模块打包工具，它将各种资源（如JavaScript、CSS、图片等）视为模块，然后根据依赖关系进行静态分析，生成对应的静态资源。Vue...
VSCode搭建Vue项目的方法
10-15
VSCode搭建Vue项目的知识点: 一、基础知识准备 ...以上内容整合了VSCode搭建Vue项目的详细步骤、必备知识、实践方法与进阶学习方向，希望对有志于使用VSCode开发Vue项目的开发者提供有价值的参考和指导。
vue搭建项目的步骤详解
Angel_girl319的博客
01-15 231
1.项目环境搭建 安装node.js 官网下载nodejs 官方网站：https://nodejs.org/en/ 具体详细安装过程，大家不懂的可以百度一下，node.js自带npm包管理工具，使用npm可以使用安装项目中的组件，终端输入命令行，可以检查node版本 node --version 安装vue-cli 脚手架工具 npm install -g vue-cli ...
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
vue项目建立步骤
红尘紫陌博客
01-03 244
一 建立vue项目 vue init webpack personMsg（最后一个是项目名） 二 引入其他插件 npm install axios –save npm install qs --save 在main.js中添加 importaxiosfrom"axios"; importqsfrom"qs"; Vue.prototype.$axios=axi...
搭建vue项目的完整步骤。
qq_42702425的博客
03-10 219
一、搭建Vue项目 1、安装node.js 下载地址：http://nodejs.cn/download/ (检测是否安装成功 node-v) 2、安装cnpm(提高开发效率) npm install -g cnpm --registry=https://registry.npm.taobao.org (检测是否安装成功 cnpm-v) 3、安装webpack (打包) cnpm instal...
Vue搭建项目过程
彳亍的博客
01-09 175
1：环境安装 安装nodehttps://nodejs.org/en/ 查看安装是否成功(控制台查看版本号存在即安装成功) node -v npm -v 2：项目搭建 1:全局安装vue-cli npm install -g vue-cli 2：使用webpack构建项目（根据需要每步选择Y或者N） vue init webpack "xxx" //xxx为你的项目名称(小写字母) 第二步可能会报错：vue : 无法加载文件 C:\Users\91...
Vue项目搭建流程
qq_41913971的博客
08-14 277
基础流程 1.安装node 主要用于使用npm包管理器，配置npm的环境变量 安装包下载官网地址：https://nodejs.org/zh-cn/（推荐使用长期LTS版，长期支持，稳定） 注意下载的位数，默认是win10的64位，下载mac，win7，32位等可点击官网顶部的下载。 直接一直下一步安装即可，可以更改安装路径，但还是建议默认路径安装。 2.全局安装脚手架 只需安装一次即可，两者都安装执行 安装 3.X版本安装 npm install -g @vue/cli 低版本安装 npm in
手动搭建一个vue项目
weixin_53917307的博客
01-07 1062
一、创建一个空的文件夹app npm init命令帮助我们快速初始化 package.json 文件 pakege.json定义了这个项目所需要的各种模块: name和version定义项目的名称和项目的版本号；dependencies属性指定了项目运行所依赖的模块；license属性是表述你项目发布遵循什么样的规则，用户拥有那些权限；author 属性指明了项目的发布者；scripts指定了运行脚本命令的npm命令行缩写 二、执行npm i –save vue安装vue 生成no...
Pycharm中详细教程：快速搭建Vue项目步骤
本文详细介绍了如何在PyCharm中新建Vue项目的步骤，这对于使用PyCharm开发Vue应用的开发者来说是非常实用的教程。首先，你需要确保你的电脑上已经安装了Node.js，因为Vue.js的开发依赖于Node.js环境。可以从Node.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值