vue项目环境配置和脚手架初始化

茴香馅饺子~

已于 2023-02-23 14:57:50 修改

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端 node.js

于 2022-10-30 23:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_48051526/article/details/127600850

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue项目环境配置和脚手架初始化

一、安装环境
二、使用Vue-cli初始化项目

微博：任万万万
图片来源：微博博主“任万万万”

欣赏完了~~学习冲冲冲

一、安装环境

Node.js

Node.js 就是运行在服务端的 JavaScript。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。

简单地说，Vue的开发和运行 （Vue组件：.vue后缀） 需要用到Node.js环境。

Vue

安装完Vue才能安装Vue-CLI，Vue-CLI可能依赖Vue。 Vue-CLI（Vue脚手架）

vue cli 是一个基于 Vue.js 进行快速开发的完整系统（标准化开发工具/平台）。

vue-cli

提供一个官方命令行工具，可用于快速搭建大型应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

1.node.js

1.1node.js下载

官网：https://nodejs.org/zh-cn/

根据自己的系统选择对应的版本和位数，不知道自己系统的可以去我的电脑属性查看，我这里选择windows-64位
下载完成后，得到这个东西

1.2node.js安装

上方下载的文件右键-选择安装-点击下一步
打勾同意-点击下一步
1查看安装位置-2选择安装位置-3下一步
建议所有的开发环境和安装文件夹都放在C盘以外的一个统一的文件夹下，方便管理。
无脑下一步
无脑下一步
点击安装
等待安装完成
检查安装是否完成
按住windows键和R键，调出运行窗口，输入cmd，点击确定。
输入node -v 显示node.js的版本号，说明node.js安装成功；
输入npm -v显示npm的版本号，说明node.js自带的npm工具也安装成功了。
注意 -v 之前有个空格。

2.安装vue

以管理员身份打开命令行窗口，输入如下命令：

npm i vue -g

3.安装vue-cli(vue脚手架)

1.安装

cnpm install vue-cli -g

2.检查安装
以管理员身份打开命令行窗口，输入如下命令(以下方式二选一)：
在这里插入图片描述
2.卸载(重装)脚手架

安装新版本或要重装前，需要先把之前安装的版本卸载掉。

卸载

npm uninstall vue-cli -g  # 3.0以下版本卸载
npm uninstall -g @vue/cli  # 3.0以上版本卸载

安装

cnpm install -g @vue/cli  # 安装的是最新版
cnpm install vue-cli@2.9.6  # 指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号
cnpm install -g @vue/cli@3.11.0 # 指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号

二、使用Vue-cli初始化项目

1. 确认自己vue命令版本，检查是否与开发版本匹配

查看vue命令版本(注意: 是大V)

 vue -V

如果版本不匹配, 可以执行命令更新

npm i @vue/cli -g

2. 创建项目

选择创建项目的文件夹，在文件夹中以管理员身份打开命令行窗口，创建项目

vue create [项目名]

3. 如果你没有保存过项目预设, 请按照下面步骤选择, 如果有则此步骤略过

选择第3个自定义预设

在这里插入图片描述

初始化 vue-cli 的核心步骤(用空格选中，以下步骤会根据1功能选择的情况不同，出现不同的选择)：

Manually select features
（手动选择功能，选择项目中需要使用的功能，上下键移动选中，空格键选择）
- (*) Babel
- ( ) TypeScript
- ( ) Progressive Web App (PWA) Support
- (*) Router
- (*) Vuex
- (*) CSS Pre-processors
- (*) Linter / Formatter
- ( ) Unit Testing
- ( ) E2E Testing
Choose a version of Vue.js that you want to start the project with (Use arrow keys)
（根据开发需要选择Vue的版本，上下键移动，确认键选中）
- 2.x
- 3.x
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
（是否使用路由器的历史模式？（需要正确的服务器设置才能在生产中进行索引回退））
- n
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
（选择CSS预处理器（默认支持PostCSS、Autoprefixer和CSS模块））
- Sass/SCSS (with dart-sass)
- Sass/SCSS (with node-sass)
- Less
- Stylus
Pick a linter / formatter config: (Use arrow keys)
（选择过梁/格式化程序配置）
- ESLint + Airbnb config
- ESLint + Standard config
- ESLint + Prettier
Pick additional lint features: (Press to select, to toggle all, to invert selection)
- (*) Lint on save
- ( ) Lint and fix on commit
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
- In dedicated config files
- In package.json
Save this as a preset for future projects? (y/N)
- N