Vue创建项目详解

最新推荐文章于 2024-06-14 20:55:18 发布
最新推荐文章于 2024-06-14 20:55:18 发布
阅读量5.1k 收藏 29
点赞数 9
分类专栏： java编程 软件工具类 springboot实战 文章标签： vue node.js vue-cli vue ui npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuangan1529/article/details/118441403
版权

1、前提

第一步：安装node.js

什么是nodejs？ 简单的说 Node.js 就是运行在服务端的 JavaScript。

  • Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境；
  • Node.js使用一个事件驱动、非阻塞式 I/O 的模型，使其轻量且高效；
  • Node.js的软件包生态系统npm是全球最大的开源库生态系统。

为什么要安装nodejs?

安装vue需要使用npm，而npm依赖于node.js（当然，安装vue也可以使用其他方法，但是都不如npm简单实用）；另外node还可以帮助vue做到：打包部署（webpack），解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less等，启动测试服务器localhost8080, 帮你管理 vue-router，vue-resource这些插件等等。

好了不多说了，具体安装node.js可以参考：Node.js安装详细步骤教程(Windows版)

第二步：安装全局vue-cli

使用npm安装vue，其中g是global，全局的意思。

npm install vue-cli -g

如果速度慢，有两种方法可以改善：

  • 方法一：可以先安装cnpm（淘宝镜像），然后再使用cnpm安装vue：
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 使用cnpm安装vue-cli
cnpm install vue-cli -g
  • 方法二：可以更改npm下载源：
#下载时指定源
npm --registry=https://registry.npm.taobao.org install

# 配置源为淘宝仓库
npm config set registry https://registry.npm.taobao.org

如果已经安装了旧版本，想要安装新版本，需要先卸载旧版本才能安装新版，卸载命令：

npm uninstall vue-cli -g

为什么要全局安装？

没有全局安装vue-cli，在项目里配置 了vue.config.js，这个配置是不起作用的。直接运行npm run dev，会默认调起服务,端口号是8080；而全局安装了vue-cli,则能使用上vue.config.js。

2、第一种方式：通过vue create命令

在你要创建项目的目录下，打开cmd，输入如下命令，开始创建hello-world项目：

vue create hello-world

在这里插入图片描述

提示你使用npm创建似乎比较慢，是否使用cnpm更快地创建（这个要先按照上面安装好cnpm才有这个提示），我选择是。

在这里插入图片描述

三种创建方式：

  • 默认套餐，vue2版本，提供babel和eslint支持。
  • 默认套餐，vue2版本，提供babel和eslint支持。
  • 自定义创建，自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

我选择第三项，自定义（通过上下键来选择）。

如果选择前两项，只需要静静等待 vue 初始化项目即可。

在这里插入图片描述

vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

对于每一项的功能，此处做个简单描述：

  • Choose Vue version：选择版本
  • Babel：支持es6 转 es5
  • TypeScript：支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support：PWA 支持。
  • Router：支持 vue-router 。
  • Vuex：支持 vuex 。
  • CSS Pre-processors：支持 CSS 预处理器。
  • Linter / Formatter：支持代码风格检查和格式化。
  • Unit Testing：支持单元测试。
  • E2E Testing：支持 E2E 测试。

注意：后面的配置选项会根据你这里的选择不同而略有不同。

根据自己的需要进行配置，我的选择如下：

在这里插入图片描述

点击回车，进行下一项：

在这里插入图片描述

选择vue版本，这里选择vue3版本。

接下来会出现如下图所示，一系列创建选项让你选择：

在这里插入图片描述

  • 选择vue版本
  • 这里是让选择在开发 Vue 组件时，要不要使用 class 风格的写法。为了更方便地使用 TypeScript ，此处选择 Y
  • 要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills ，选择Y
  • 是否使用路由的history模式，选择Y
  • 在项目里面需要支持何种动态样式语言，选择LESS
  • 选择哪种代码校验方式，这里选择 ESLint + Standard config(严格模式)
  • 选择何时进行代码校验，两种都选择：每当保存文件和当执行 git commit 提交的时候
  • 选择单元测试工具，直接选择现在比较火的 Jest
  • 这一步就是要选择配置文件的位置了，选择In dedicated config files
  • 要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用，我选择N

OK，静静等待初始化完成即可。

完成后，就可以看到项目根目录下多出一个hello-world项目。

3、第二种方式：通过vue-cli脚手架创建

使用vue初始化基于webpack的新项目：

vue init webpack my-project

如果执行出现问题：

在这里插入图片描述

如上图所示，按照提示执行”npm i -g @Vue/cli-init“即可，执行创建命令后，接下来要输入一系列创建选项：

  • Project name—项目名称，直接回车；
  • Project description—项目描述，输入“Vue项目测试”，点击回车；
  • Author—作者，输入“aizai846”,点击回车；
  • Runtime + Compiler: recommended for most users和Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere两个选项—第一个是运行加编译，推荐使用，第二个仅运行时。通过键盘上下按钮选择后，点击回车；
  • Install vue-router?<Y/n>—是否安装vue路由插件，输入“Y”,点击回车；
  • Use ESLint to lint your code? <Y/n>—是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用，但作为初学者，建议不进行安装，输入“n”，点击回车；
  • Set up unit tests<Y/n>—是否安装单元测试，这里输入“n”，点击回车；
  • Setup e2e tests with Nightwatch？<Y/n>?—是否安装e2e测试，这里输入“n”，点击回车；
  • Should we run “npm install” for you after the project has been created? Yes, use NPM Yes, use Yarn No, I will handle that myself—三个选项，这里我们选择第三个，因为通过npm install安装vue项目依赖库，非常的慢，我们可以在项目创建后，自己通过“cnpm install”安装。

整个执行结果图片如下：

在这里插入图片描述

OK，接下来要自己安装一些依赖包：

# 进入项目根目录
cd my-progect

# 使用cnpm安装
cnpm i

OK，等待安装结束，项目已经初始化完毕。

4、第三种方式：使用vue ui命令（推荐）

在创建项目的目录打开cmd，运行如下命令：

vue ui

运行后，会自动打开浏览器，出现如下界面：

在这里插入图片描述

选择创建，然后点击创建新项目：

在这里插入图片描述

填写项目名称，去掉git覆盖选项：

在这里插入图片描述

选择手动配置：

在这里插入图片描述

这个和前两种方法一致选择自己想要的属性，下面是我的选择：

在这里插入图片描述

选择vue版本，这里选择3版本：

在这里插入图片描述

是否将配置项保存，不选择直接创建项目：

在这里插入图片描述

一套流程走下来，其实本质和上面两种方法内容是一致的，只不过是方法不同而已。

OK，创建完成后，会生成对应的项目仪表盘：

在这里插入图片描述

在仪表盘中，都可以手动添加依赖、插件，手动启动项目等等，非常方便。

5、启动项目

启动项目：

# 进入项目目录
cd hello-world

# 运行项目
npm run serve

仪表盘运行：

在这里插入图片描述

启动后，打开网址：http://localhost:8080/，生成页面：

在这里插入图片描述

6、项目打包

在开发完项目之后，就应该打包上线了。 vue-cli 也提供了打包的命令，在项目根目录下执行：

npm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。

7、单元测试

执行命令：

npm run test
蓝亚之舟
关注
  • 9
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue入门——用Vue创建一个HelloWorld
weixin_44493195的博客
06-01 3200
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统！ 如何创建HelloWorld程序 Step1：创建一个id为app的div标签 <div id="app"></div> Step2：在div当中用左右为双括号的方式声明一个变量message。 <div id="app"> {{message}} </div> 上述两步是vue.js最常见的一种文本查值的方式。 Step3：在sricpt脚本中创建vue实例（对象
vue入门教程 简单实现一个hello world
热门推荐
marendu的博客
05-21 2万+
vue入门教程 简单实现一个hello world 此篇适合没学习过vue的小白观看，有一定基础可观看笔者vue笔记相关文章，本文主要介绍，和讲解vue。 1.vue运行模式 简单如下图 view:表示视图层，就是显示的ui界面 model：表示数据层，用于定义数据修改和操作业务逻辑 viewModel：用于同步view和model的对象 在MVVM架构下，View 和 Model 之间并没...
【Vue】使用create-vue搭建Vue3项目
最新发布
qq_39921135的博客
06-14 398
create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应。Vue CLI 是用来创建Vue2的。如果是创建Vue3，底层更推荐使用create-vue。由于现在还没有到项目，到项目再具体的去定制化，现在就一律选中No即可，ESLint可以选上。vite是尤大大创建的vue构建工具，并且是市场上非常火爆的。前置条件 - 已安装16.0或更高版本的Node.js。执行如下命令（初始化），这一指令将会安装并执行。使用键盘上的左右键进行切换选择。
如何搭建一个vue项目(完整步骤)
qq_39093474的博客
09-11 2万+
这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个。）下载hbuildx安装文件（已提供，无需下载），下载后，直接解压就可以使用。代码检查，选标准的就行，方向键切换，空格键选择然后回车。按空格键选择要安装的配置资源，带 * 号说明被选上了。上下方向键选择版本，这里我们选择vue2，然后回车。代码检查时间，方向键切换，空格键选择然后回车。启动成功之后，打开路径看到如下界面说明成功。通过上下方向键选择对应配置，然后回车。
vue create命令详解，Vue CLI中
浩星
02-21 7045
前言： Vue CLI中的vue create命令有一些可选项。 具体：vue create+ ... 选项： -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略提示符并使用默认预设选项 -i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项 -m, --pac...
vue create报错解决方法
javaEE_zero的博客
04-14 9979
vue create 【项目名称】报错如下： error Invalid dependency type requested: alias ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist 看到网上有很多针对 ERROR command failed的解决方案，但实际上错误原因是低版本的n
使用vue create创建项目时遇到的问题
随缘手札
11-14 1695
报错：Warning: name can no longer contain capital letters 出现这个提示时，项目自动退出创建，如下图： 原因是使用vue create创建项目时，项目名称中不能带有大写字母，换成vue create atuser就可以了； 报错：ENOTFOUND 报错如下图： 出现这个报错可能是因为之前我npm设置了淘宝镜像，然后淘宝镜像出了点问题(？)具体原因不太清楚，把npm设置回之前的镜像就好了； # 用来查看当前npm的镜像 npm config get re
Python Django Vue 项目创建过程详解
09-18
在PyCharm的终端中，进入你想要创建项目的目录，然后执行： ``` cd pyWeb django-admin startproject pyweb_dome ``` 其中`pyweb_dome`是你的项目名称。 2. **创建Django应用** 在项目根目录下，使用`manage....
基于脚手架创建Vue项目实现步骤详解
10-15
在想要创建项目的路径下，运行`vue create test`，其中`test`是你的项目名称。随后，CLI会询问你选择预设配置还是自定义配置。选择“default”则使用默认配置，包括Babel和ESLint；选择“Manually select features...
详解Vue用cmd创建项目
10-17
2. **创建项目目录**： 首先，你需要选择一个合适的位置新建一个文件夹，用于存放你的Vue项目。例如，你可以命名为“my-vue-project”。在文件资源管理器中，右键选择“新建” -> “文件夹”，然后命名。 3. **...
node创建Vue项目步骤详解
10-15
在本篇文章里小编给大家整理的是关于node创建Vue项目步骤详解内容，需要的朋友们可以学习下。
vue项目创建及配置选择
qq_52764250的博客
01-22 4730
前言 vue是一套用于构建用户界面的渐进式框架。我使用vue最直观的感受就是它组件化开发的高效率和高复用。接下来我将讲述从从零搭建vue框架。 准备 在我们创建vue项目之前我们需要的环境配置 Node.js :Javascript运行环境 npm ：包管理工具（同Node.js一同安装） vue.js : 官方命令行工具 npm install vue -g wepack :前端资源加载、打包工具 npm install webpack -g vue全家桶 了解vue全家...
vue项目的创建命令选取&ESLint的安装命令选取
qq_45426187的博客
02-27 683
6.Pick a linter/formatter config 选择 ESLint + Prettier(最下面的)target:'http://localhost:8081', //代理目标的基础路径 真实请求路径。config.headers.Authorization = token // 设置请求头。//匹配所有以 '/api'开头的请求路径。2.等待跳出选项, 选择 //手动选择功能。
用Vue3创建项目和Vue3指令
weixin_62495505的博客
07-29 246
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 元素上，并在上面使用 v-if。最终的渲染结果将不包含 元素。createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
创建Vue项目流程
weixin_66059613的博客
11-29 1563
创建Vue项目流程
使用vue创建项目
z_qianzhi的博客
07-20 146
1.首先全局安裝：npm install -g @vue/cli 2.检查其版本是否正确：npm --version 3.创建项目：vue create 项目名称 接下来选择预设：1.vue2默认值 2.vue3默认值 3.手动选择 4. 选择项目所需要的功能，上下键移动，点击空格键选择 Choose Vue version（选择vue版本）CSS Pre-processors（css预处理器） Unit Testing/E2E Testing（...
创建Vue项目适合初学者的详细教程
weixin_44576057的博客
06-11 172
一.创建项目前先搭建环境 二.创建项目 1.新建文件夹： 例如： F:\TopsTest 2.根据模版创建新项目 打开cmd窗口，进入创建的文件夹目录下，输入如下命令 vue init webpack 项目名称（英文） 回车以后会出现下图（配文字参考选yes还是no）： Project name： 项目名称 Project description：项目描述 Author：作者(可输入自己的名字,也可以空着) Vue build： vue的构建,一般就选择第一个按回车即可 Instal
Vue 环境搭建和 Hello world
Errol's Blog
03-22 2330
vue环境搭建和 hello world
vue hello world
xu990128638的专栏
05-20 250
vue hello world 1. 依赖环境 Node.js 8.9+ npm (安装nodejs的时候自动安装了npm) 2. 官网文档 https://cn.vuejs.org/v2/guide/ 2.1 Vue.component 缺点 全局定义：强制要求每个component 中的命名不能重复 字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用丑陋的\ 不支持CSS：意味着当HTML 和JavaScript 组件化时，css明显被遗漏 没有构建步骤：限制只能使用html和ES5 JavaSc
vue cli 创建vue2项目
09-02
要使用Vue CLI创建Vue2项目，你需要先全局安装一个桥接工具，并按照以下步骤进行操作： 1. 第一步：搭建Node.js运行环境。根据你的操作系统选择合适的安装包，可以在官网https://nodejs.org/en/download/下载安装。 2. 第二步：安装Webpack。在命令行中运行以下命令来全局安装Webpack：npm install webpack -g。 3. 第三步：安装脚手架。在命令行中运行以下命令来全局安装Vue CLI 2的脚手架：npm install -g @vue/cli-init。 4. 第四步：创建项目。在命令行中进入项目要存放的文件夹，并运行以下命令来创建项目：vue init webpack my-project。其中，my-project为你的项目名称。根据命令行的提示，配置项目的相关属性信息，比如项目名称、项目描述、作者等。 5. 项目创建完成后，进入项目目录，运行命令npm run dev来启动本地开发服务器。将命令行中显示的网址复制到浏览器中，即可访问你创建的Vue2项目。 引用 请注意，以上步骤是使用Vue CLI 2来创建Vue2项目的方法。如果你使用的是Vue CLI 3及以上版本，请参考官方文档进行操作。引用<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [使用vue-cli创建vue2项目（详解）](https://blog.csdn.net/qq_43080548/article/details/123919123)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue CLI创建vue2项目](https://blog.csdn.net/woshiliyuwang/article/details/122989570)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值