Vue创建项目详解

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 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、付费专栏及课程。

余额充值