vue工程学习（1）之vueCli创建vue项目

最新推荐文章于 2023-10-22 21:45:01 发布
最新推荐文章于 2023-10-22 21:45:01 发布
阅读量728 收藏 1
点赞数 1
分类专栏： VueJS 文章标签： vue js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30442207/article/details/117588118
版权

目录

vue工程学习（1）之vueCli创建vue项目

一、什么是Vue cli脚手架?

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

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

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

简单来说就是一个工具，用来创建项目的工具，就像创建maven项目时也可以选择模板一样，可以快速创建一个maven项目一样

二、安装必要环境

第一步：安装nodejs

1）Node.js简介

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！
Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。
npm 是 Node.js 标准的软件包管理器。（一般你要使用npm安装Node.js就可以了）

2）下载Node.js

下载地址：nodeJs官网下载
安装那个，看自己电脑是32位还是64位
在这里插入图片描述

3）安装步骤就是一路next（建议把安装路径修改一下）
4）验证安装情况，执行命令有版本号出来就证明安装成功了

检查node安装是否成功：node -v
在这里插入图片描述
检查npm安装是否成功：npm-v
在这里插入图片描述

5）环境信息配置

因为nodeJs在安装会缓存一些文件，默认路径都是放在C:\Users\用户名\AppData\Roaming\npm，从而占用C盘的空间。一般建议把这个修改：
操作步骤，打开cmd，在cmd上执行命令(一般放在和nodejs安装路径下面)

  • npm config set prefix “D:\xx\nodejs\node_global”
  • npm config set cache “D:\xx\nodejs\node_cache”
6）配置镜像，用国内的淘宝镜像下载比较快

在cmd上执行命令：npm config set registry https://registry.npm.taobao.org

7）查看配置好的信息：npm config list

在这里插入图片描述
还有一种最简单的配置就是找到文件.npmrc，直接把需要配置的东西写上保存就行

prefix=D:\xx\nodejs\node_global
cache=D:\xx\nodejs\node_cache
registry=http://registry.npm.taobao.org

第二步：安装vue-cli

安装命令：npm install -g @vue/cli，-g是全局安装的意思
安装成功之后，验证是否成功，执行命令：vue -V（V是大写，不用大写就用：vue --version）
在这里插入图片描述

！如果出现问题：‘vue’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

这个问题是没有配置环境变量导致的，配置上就可以使用了

第一步：找到vue.cmd所在目录路径（用evertThing全局搜索一下），一般都是自己之前设置的prefix "D:\xx\nodejs\node_global"路径里
在这里插入图片描述

第二步：然后把这个vue.cmd所在地址添加到系统配里的环境变量里Path里
在这里插入图片描述

三、使用Vue cli创建第一个vue项目

vue cli有一个官网：https://cli.vuejs.org/zh，这个专门对cli的操作有说明

1）在自己想要创建项目的目录上打开CMD

2）输入创建命令

注：

  • vue create 项目名，这个是cli3创建方式
  • vue init webpack 项目名,这个是cli2创建方式
第一种：使用cli2创建工程，vue init webpack vuecli2-project

1.开始输入命令：

D:\vuework>vue init webpack vuecli2-project

? Project name (vuecli2-project)

? Project name vuecli2-project ###输入项目名，一般直接回车，默认用vuecli2-project
? Project description my vuecli2 ###描述
? Author binggoling ###作者名称
? Vue build standalone
? Install vue-router? No ###是否安装路由
? Use ESLint to lint your code? No ###是否安装语法检查
? Set up unit tests No ###是否安装单元测试
? Setup e2e tests with Nightwatch? No ###是否安装端对端
? Should we run `npm install` for you after the project has been created? (recommended) npm ###是否安装方式选择npm，还有yarm安装
   vue-cli · Generated "vuecli2-project".


# Installing project dependencies ...
# ========================

npm ...................
...........
省略内容

added 1272 packages from 675 contributors in 215.325s

48 packages are looking for funding
  run `npm fund` for details


# Project initialization finished!
# ========================

To get started:

  cd vuecli2-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

## 完成创建

2.安装步骤build说明，有两个选择：Runtime + Compiler和runtine-only
在这里插入图片描述

翻译解析说明：

runtime+compiler:  
recommeded for most users(译：建议大多数用户使用)

runtine-only: 
大约6kb的更轻的 min+gzip，但是模板<或任何特定于vue的HTML>只允许在.vue文件中- reander是需要在其他地方
优点：
打包出来更小
运行效率更高

3.运行项目：

cd vuecli2-project #进入目录
npm run dev #运行

#-----------------------------------------------------运行成功-----------------------------------------------------------------------
 DONE  Compiled successfully in 2087ms  
 I  Your application is running here: http://localhost:8080

4.浏览器直接访问：http://localhost:8080/

5.项目目录解析：

第二种：使用cli3创建工程，vue create vuecli3-project

1.有三个选择：

  • Default ([Vue 2] babel, eslint) （创建vue2.x）

  • Default (Vue 3 Preview) ([Vue 3] babel, eslint)（创建vue3.x）

  • Manually select features（手动选择功能）

我们选择Manually select features，自己配置

Vue CLI v4.5.7

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

2.选择需要的环境，上下选择，空格选择或取消，我这边只选择Choose Vue version和Babel，其他功能自己慢慢自己安装就好

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version #选择版本
 (*) Babel #转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript #新语法，TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 ( ) Progressive Web App (PWA) Support #渐进式Web应用程序
 ( ) Router #路由
 ( ) Vuex #vue的状态管理模式
 ( ) CSS Pre-processors #CSS 预处理器（如：less、sass）
 ( ) Linter / Formatter #代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing #单元测试
 ( ) E2E Testing #e2e（end to end） 测试

3.选择版本Choose Vue version：2.x

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

4.选择Babel：In dedicated config files，把这个配置独立出来，不整合在package.json文件

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

5.还有是否保存模板，就no就好，然后回车就会开始创建工程了

Save this as a preset for future projects? No

6.安装成功，整个安装脚本

Vue CLI v4.5.7

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel
? Choose a version of Vue.js that you want to start the project with 2.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.7
✨  Creating project in D:\vuework\vuecli3-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> core-js@3.13.1 postinstall D:\vuework\vuecli3-project\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\vuework\vuecli3-project\node_modules\ejs
> node ./postinstall.js

added 1207 packages from 639 contributors in 104.96s

68 packages are looking for funding
  run `npm fund` for details

🚀  Invoking generators...
📦  Installing additional dependencies...

added 3 packages from 1 contributor in 10.754s

68 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vuecli3-project.
👉  Get started with the following commands:

 $ cd vuecli3-project
 $ npm run serve

7.运行项目

 $ cd vuecli3-project
 $ npm run serve
 #-----------------------------------------------------运行成功-----------------------------------------------------------------------
  DONE  Compiled successfully in 1856ms                                                       
  App running at:
  - Local:   http://localhost:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.

8.浏览器直接访问：http://localhost:8080/

9.项目目录解析：

四、提示

Project setup 项目设置

npm install

Compiles and hot-reloads for development 为开发编译和热重新加载

npm run serve

Compiles and minifies for production 编译和缩小用于生产

npm run build

Lints and fixes files Lints和修复文件

npm run lint

五、展示界面：localhost:8080

在这里插入图片描述

完美结束！！！！！！！

binggoling
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
使用vue-cli3+typescript的项目模板创建工程的教程
10-15
在本文中，我们将深入探讨如何使用Vue CLI 3与TypeScript创建一个项目模板。Vue CLI 3 是 Vue.js 的官方命令行工具，它极大地简化了 Vue 应用程序的构建过程。而TypeScript是一种强类型、面向对象的JavaScript超集，...
Vue-CLI环境变量和模式
SoOnPerson的博客
12-20 590
Vue-CLI环境变量和模式 1、官方文档 2、场景 本地开发时请求地址，线上环境请求地址，不一致，部署路径不一致，其他环境变量因为部署环境不一致，方便打包和开发 3、代码 1、项目结构 .env 是所有的环境中都会被载入 .env.dev 是在指定模式中被载入 .env.product 是在指定模式中被载入 .env NODE_ENV=local VUE_APP_PREVIEW=tru...
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
分享java学习路上的一些笔记，不足之处多多见谅。
06-14 5459
Vue-cli（基于cli如何创建项目）最详细教程，手把手教学
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
vue-cli创建vue项目详细步骤
Hannah_Hannah_的博客
04-15 2万+
一、安装node环境 二、下载vue和vue-cli脚手架 命令：npm i-g vue ; npm i -g @vue/cli 三、在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端） 四、创建vue项目，输入命令（ vue create 项目名称） 五、进入详细选择 (上下 方向键选择,空格键确定,enter进入下一步) 1、默认vue2版本和默认vue3版本都是有Eslint和Babel的，Eslint是代码规范的，Babel是将ES6转化为ES.
Ruoyi前端启动报错
yzs2022的博客
02-17 6050
Ruoyi前端
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
vue-cli如何快速构建vue项目
11-29
vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。  1、安装vue-cli 使用npm全局安装vue-cli（前提是已经安装了nodejs，否则连npm都用不了） $ npm install -g vue-cli 2、创建自己的工作空间 $ vue ...
Note that the development build is not optimized. To create a production build, run yarn build.
最新发布
weixin_44749255的博客
10-22 3971
Note that the development build is not optimized. To create a production build, run yarn build. events.js:352 throw er; // Unhandled 'error' event ^
[乐意黎原创] React学习--安装React，并创建工程目录
打杂人
04-18 355
首先，安装更新npm和nodejs版本:https://blog.csdn.net/aerchi/article/details/89383901 脚手架, 就是提供一个约定好的工具(框架). 按照约定来写自己的业务代码, 通过脚手架把约定的代码编译成真正能够执行的业务代码. 使用脚手架 react的脚手架其实非常多, 其中官方推荐的脚手架有下面这些: Create React App -...
Electron + React 跨平台桌面应用部署及发布
vivisoul的专栏
08-31 5730
概述 笔者目前在使用Electron开发跨平台桌面应用，基于原生的GUI库的支持有限，需要使用React辅助开发，之前未开发过前端项目，这次踩的坑也很多，现将对应部署过程记录，以供后来才考。 开发环境 笔者通常在MacOS/Windows上同步验证： 软件 版本 说明 MacOS 10.13.6 macOS High Sierra Windows...
知识点11--使用vuecli的方式搭建一个项目
别人笑我太疯癫，我笑他人看不穿。
07-10 641
在前面的知识点，我使用的是离线下载vue.js，甚至在使用element UI的时候，我也是直接采用的官方引用，从未给大家演示过如何使用vue client去搭建一个项目，最根本的原因是因为要使用client的方式需要一个node.js环境，这个东西它是一个JavaScript引擎，一个基于谷歌v8浏览器而派生的环境，如果大家用过es，那就应该熟悉node，因为它是es-head连接工具的必备品，可是这个环境本身他有很多问题，他版本相当多，但是能用的版本基本没几个，真的是纯粹要靠经验来积累哪个版本能用的一个
vue-cli 创建 vue 2.X 项目
悟世君子的博客
06-17 7194
1、全局安装 vue-cli npm install -g vue-cli 2、创建存放项目的工作区文件夹 project 3、在 project 文件夹打开 cmd 窗口 执行如下命令，创建名为 finance 的项目 vue init webpack finance vue-cli 会以交互的方式问你是否需要安装相关插件，如 vue-router，ESLint 等，这里可根...
使用 Vue CLI 创建 Vue 项目的详细步骤
tigerhhzz的博客
03-14 283
使用 Vue CLI 创建 Vue 项目的详细步骤
查询被占用的端口和关闭端口
chengduxiannanjin的博客
05-26 4531
查询被占用的端口和关闭端口 前言 Note that the development build is not optimized.To create a production build, run npm run build.或者在前后端调试时出现跨区域问题，其实都端口问题，一般在veu中调试的时候使用的8080端口，因此如何查看计算机已经使用的端口和释放8080端口让vue可以使用呢？ 一、如何查看计算机已经使用的端口 1.开始——运行——cmd netstat -an //本机开放的端口情况 net
vue-cli3安装问题解决
qq_43870476的博客
08-26 2249
卸载vue-cli2之后安装vue-cli3 报错 npm ERR! code EEXIST npm ERR! path D:\software\node.js\node_global\node_modules@vue\cli\bin\vue.js npm ERR! dest D:\software\node.js\node_global\vue.ps1 npm ERR! EEXIST: file already exists, cmd shim ‘D:\software\node.js\node_glob
Vue搭建项目
weixin_47906106的博客
07-10 2054
一路下一步 安装NodeJS之后使用npm来安装包使用的是国外的地址，经常会出现超时错误，可以通过修改为国内的淘宝源来加速安装。 如果想取消这一配置可执行 安装vue-cli脚手架 创建项目 全局引入elementui 引入 Element 你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。¶完整引入 在 main.js 中写入以下内容： 安装vue-router 在当前文件夹下新建router文件夹，在该文件中新建index.js 设置管理路由 在s
Vue知识点总结(24)——使用VueCli创建一个项目（超级详细）
CreatorRay的博客
01-18 480
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！ 在上一篇文章我们已经简单了解了一下传统创建组件的缺点和使用单文件组件的好处，并且进行了快速的原型开发。 今天我们来试着使用VueCli3完整的创建一个项目。 首先我们打开终端，在合适的目录下运行以下命令：（前提是你已经完整了上篇文章对于Vue-Cli3的基本配置） vue create hellovuecli3 这个hellovuecli3是文件名，文件名大家可以自拟，但是注意，不要有大写字母的出现，这里是不支持大写的。 如.
vue项目建立.docx
01-06
如果之前安装过旧版本的vue-cli(1.x或2.x)，需要先卸载，可以通过运行npm uninstall vue-cli -g或yarn global remove vue-cli来完成。Vue CLI 3需要NodeJs版本大于等于8.9，官方推荐使用8.11.0，可以通过nvm来管理多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

binggoling

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值