通过npm安装vue脚手架

准备工作

安装node.js node.js中集成npm 下载地址：node下载连接
下载好后可以通过cmd命令查看是否安装成功
安装cnpm（可选）
由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们也可以使用npm的国内镜像——cnpm（淘宝npm）
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

Vue-cli 2.0和之后版本命令不同，若之前安装过2.0可以先卸载
npm uninstall -g vue-cli
安装vue-cli
npm install –g @vue/cli
查看版本
安装成功之后可以通过cmd命令查看安装的vue脚手架的版本号

创建项目

切换到指定目录
创建项目
配置项目
是上下进项选择，回车进行确认
选择需要配置项目

配置项说明：
( ) Babel//转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end) 测试
选择Vue版本
选择ESLint代码校验规则
选择如何存放位置

In dedicated config files // 独立文件放置
In package.json // 放package.json里
是否存储当前配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQJrclvv-1658815734006)(https://s2.loli.net/2022/07/26/9fiNS28MJWRHyOK.png)]
创建项目
启动项目
切换目录——运行服务
终止Vue项目
连续按两次ctrl+c 或者将命令行窗口关闭

打开项目后项目的结构

项目结构说明：

1node_modules：用于存放项目中各种依赖包
public：用于存放静态资源
- index.html：生成项目的入口文件

src：Vue的源代码文件

- assets：用于存放着各种静态文件，比如图片
- components：应用程序的组件
- App.vue：应用程序根组件
- main.js：入口文件，主要作用是初始化 vue 实例

其他：配置文件

- eslintrc.js: eslint代码检查的相关配置放到这里。
- .gitignore：配置git上传想要忽略的文件格式。
- babel.config.js：是一个工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容（低版本ES）。
- package.json：模块基本信息项目开发所需要的模块，版本，项目名称
- package-lock.json：是在npm install时候生成的一份文件，用于记录当前状态下实际安装的各个npm package的具体来源和版本号

public文件目录和src/assets目录区别
- public一般不用动，在vue-cli在进行build的时候，public下面的文件会原封不动的添加到dist中，不会被合并、压缩；不会被webpack打包工具所处理。

来源和版本号

public文件目录和src/assets目录区别

- public一般不用动，在vue-cli在进行build的时候，public下面的文件会原封不动的添加到dist中，不会被合并、压缩；不会被webpack打包工具所处理。
- src/assets目录，build之后，assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等。

使用npm安装vue脚手架相关推荐

vue开发搭建（npm安装 + vue脚手架安装）
一.概念 1.npm: Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...
关于npm和yarn 安装vue脚手架
第一篇博客有点小紧张.轻喷~ 第一步:安装node.js 地址 --------https://nodejs.org/en/ 详细步骤这里就不写了可以去看地址 ----- ...
npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
npm安装淘宝镜像安装Vue脚手架
打开CMD 命令窗口 0.安装nods.js: 官网直接下载安装, 傻瓜式安装, 直接直接下一步查看版本 1.通过cnpm使用淘宝镜像: npm install -g cnpm --registry ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
nodejs绿色版下载安装及配置淘宝镜像、安装vue脚手架
目录一.下载地址二.安装三.测试四.环境配置五.配置淘宝镜像六.安装vue脚手架一.下载地址 nodejs下载详图: 二.安装傻瓜式安装这里我就不多说了(一直点确定就完事了) 三.测 ...
01 安装Vue脚手架
文章目录 1.Vue脚手架 2.安装 2.1 下载安装node.js 下载node.js 安装node.js 测试node.js 2.2 配置npm的源 2.3 使用npm安装@vue/cli 1.V ...
如何安装vue脚手架
第一步,首先安装node.js 打开官网下载 | Node.js 选择对应的安装包,一直点next即可第二步,安装vue脚手架打开终端,通过win+R,输入cmd, 为了能更快的下载脚手架,可以安 ...
手把手教你安装vue脚手架
第一步先安装Node.js Node.js官网 https://nodejs.org/zh-cn/download/ windows点击这个即可下载好之后,就可以开始安装了最好选择Add to ...

使用npm安装vue脚手架

通过npm安装vue脚手架

准备工作

安装脚手架

创建项目

打开项目后项目的结构

使用npm安装vue脚手架相关推荐

最新文章

热门文章