从零开始搭建 vue-cli 项目

简介: 从零开始搭建 vue-cli 项目

安装 node.js 环境

下载地址为:(nodejs.org/en/)

查看是否安装成功

node -vnpm -v

复制代码

有版本号的就说明安装成功了


网络异常,图片无法展示
|


为了提高我们的速度可以下载淘宝镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org

复制代码

注意安装了淘宝镜像 npm 命令要改成 cnpm

然后全局安装 vue-cli

cnpm install -g vue-cli

复制代码

查看 vue 版本号注意这里的 V 是大写的

vue -V

复制代码


网络异常,图片无法展示
|


接下来开始创建 vue-cli 注意 hello-vue 是项目名称

vue create hello-vue

复制代码

通过↑ ↓ 箭头选择配置

“sc”、“a”“sa”是预设名

default vue3:是默认配置 3.x

default vue2:是默认配置 2.x

Manually select features:自定义配置

这里选“Manually select features”自定义配置


网络异常,图片无法展示
|


通过↑ ↓ 箭头选择你需要的配置 这里空格是选中,a 是全选,i 是反选

网络异常,图片无法展示
|


Babel :转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。

TypeScript: TypeScript 是一个 JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了

Progressive Web App (PWA) Support: 渐进式 Web 应用程序

Router :vue-router(vue 路由)

Vuex : vuexvue 的状态管理模式

CSS Pre-processors :CSS 预处理器(如:less、sass)

Linter / Formatter :代码风格检查和格式化(如:ESlint)

Unit Testing :单元测试(unit tests)

E2E Testing : e2e(end to end) 测试

选脚手架版本


网络异常,图片无法展示
|


路由器是否使用历史记录模式?y 是 n 否


网络异常,图片无法展示
|


您希望将 Babel、ESLint 等的配置放在哪里。?

In dedicated config files :在专用配置文件中

In package.json:在 package.json


网络异常,图片无法展示
|


是否将此保存为将来项目的预设?y 是 n 否


网络异常,图片无法展示
|


将预设另存为:


网络异常,图片无法展示
|


创建成功


网络异常,图片无法展示
|


接下来启动项目

cd 到项目目录

cd hello-vue

复制代码

启动项目

npm run serve

复制代码


网络异常,图片无法展示
|


复制网址到浏览器打开


网络异常,图片无法展示
|


vue-cli 项目就创建好了

目录
相关文章
|
25天前
|
存储 JavaScript
解锁Vuex高级玩法:模块化与插件共舞,让你的Vue项目状态管理如虎添翼!
【8月更文挑战第27天】Vuex是一款专为Vue.js应用程序设计的状态管理模式及库,它通过集中管理组件状态来确保状态变更的可预测性。在大型应用中,采用模块化管理可以让代码结构更加清晰,同时利用插件增强功能。模块化管理允许将store拆分为包含各自state、mutations、actions和getters的独立模块。插件则能监听状态变化,实现诸如日志记录或数据持久化等功能。本文通过具体示例介绍了如何在Vuex中实现模块化管理和插件的高级应用。
34 1
|
1月前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
1月前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
59 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
11天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
216 58
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
6天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
9天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
14天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
43 11
|
1月前
|
JavaScript
Vue项目如何生成树形目录结构
这篇文章介绍了如何在Vue项目中生成树形目录结构,通过安装并使用`mddir`命令行工具来创建一个`directoryList.md`文件,从而快速获取项目的树形目录列表。
Vue项目如何生成树形目录结构
|
1月前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
285 1
Vue3项目使用G6可视化组件实现一个树形机构图