vue-cli 初始化vue工程

最新推荐文章于 2022-11-21 22:34:22 发布
原创 最新推荐文章于 2022-11-21 22:34:22 发布 · 207 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #node.js

本文介绍了如何通过VueCLI创建一个新的前端工程。首先，需要全局安装VueCLI，然后使用`vue create`命令创建项目，手动选择特性，如Vue版本、路由模式、CSS预处理器和校验工具等。在配置完成后，运行`npm run serve`启动项目，验证工程创建成功。

使用 Vue CLI 初始化工程


VueCLI 创建或者升级

npm install --global @vue/cli

创建工程

  1. 创建命令

    	vue create vuetemplate

  2. 上、下键选择 Manually select features
    在这里插入图片描述

  3. <空格> 键选择工程特性
    在这里插入图片描述

  4. 选择vue版本
    在这里插入图片描述

  5. 是否使用 history 路由模式，这里输入 n 不使用 在这里插入图片描述

  6. 选择 CSS 预处理器
    在这里插入图片描述

  7. 选择校验工具
    在这里插入图片描述

  8. 选择在什么时机下触发代码格式校验
    在这里插入图片描述

  9. 配置文件单独保存成文件
    在这里插入图片描述

  10. 是否保存以上配置，根据自己情况而定
    在这里插入图片描述

  11. 工程创建
    在这里插入图片描述

  12. 验证

    cd vuetemplate
npm run serve

    工程创建成功在这里插入图片描述

vue学习笔记（一）：使用 vue cli 初始化项目
name_lsc的博客
01-20 1467
安装 vue-cli vue 官方提供了 vue-cli 用于创建工程化的 vue 项目，vue 的脚手架需要先全局安装，前置条件是电脑中需要有安装 node 环境 $ npm install @vue/cli -g or $ yarn global add @vue/cli 运行命令检查脚手架是否安装完成，如果简写的话，V是大写的 $ vue -V or $ vue --version 如果正常安装的话，运行上面检测安装完成的命令后，应该是如下结果： @vue/cli 4.5.15 （4.5.15代
Vue环境安装、Vue-cli安装、初始化项目
Jackson_ji的博客
04-29 756
隔了近7月没敲过代码，连最初的Vue项目初始化都忘记了，今天有时间，回忆下；之后有时间还是天天的看会，不能忘了吃饭的家伙啊~~~~ Vue环境安装 1、安装node.js（版本不得低于8）全局安装，下载node的链接路径https://nodejs.org/en/，选择带有Current的安装；步骤只需next next就行，没有确认的规范；安装的盘符，你可以自己选择，之后检查node是否安...
Vue.js之使用vue-cli初始化项目
Baby_加油_的博客
06-11 1442
使用vue框架的时候，经常会用到vue的脚手架，那么怎么进行初始化呢？ 一、安装步骤 step1、安装Node.js 首先需要下载并安装Node.js，下载地址：Node官网。 测试安装是否成功，打开cmd，使用 node -v，如果显示版本号则表示安装成功。 step2、安装vue-cli 使用vue-cli（脚手架）搭建项目，vue-cli是Vue官方提供的用于搭建...
vue-cli的样式初始化
Lisunlight的博客
08-04 3999
清除多余样式，实现高度宽度自适应，放置App.vue中 #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width:100%; height:100%; } ...
VUE学习笔记：23.脚手架vue-cli之简介，安装及vue cli2初始化项目及其相关选项
ouyicnm的博客
06-25 365
1.什么是vue-cli 如果我们使用webpack来管理项目，那么需要手动搭建，配置大量的东西。例如：打包css，js，html以及各种插件等等，会显得非常麻烦。而使用vue-cli框架可以自动生成对应的开发环境及配置，大大提高我们的开发效率。 2.安装vue-cli 第一步：安装node：https://nodejs.org/zh-cn/ 当执行以下命令成功时，表示安装完成。 第二步：安装淘宝镜像（类似于阿里云的maven中央仓库镜像） # 安装 npm install -g cnpm --re
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个页面 watch-multi : 并行观看多个页面 你可以在你的项目中使用vue-cli-service [command] 初始化配置 如果你的项目...
vue-cli初始化项目中使用less的方法
10-18
在 Vue CLI 初始化的项目中集成 Less 作为 CSS 预处理器，可以使样式代码更易于管理和维护，利用 Less 的变量、嵌套规则、运算符等功能提升开发效率。 Less 是一种 CSS 预处理器，它允许开发者使用变量、嵌套规则、...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
vue-cli开发的商城源代码
01-18
- `main.js`：应用的入口文件，导入并初始化Vue实例。 2. `public` 目录：通常存放静态资源，如 favicon、index.html 文件等。 3. `package.json`：记录项目依赖和脚本，如启动开发服务器、构建生产环境代码的...
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
08-27
它简化了项目的配置，提供了预设（preset）来快速初始化项目。在本文中，我们将详细讲解如何使用 Vue CLI 构建项目，以及如何在项目中使用 axios、Sass 和 Swiper。 首先，我们来安装 Vue CLI： ```bash npm ...
初始化vue项目实例（vue-cli）
mandy的博客
04-08 354
准备工作 vs code编辑器、chrome浏览器、node安装 步骤 全局安装vue-cli npm install vue-cli -g 初始化一个项目 vue init <template-name> <projectName> 第一个是模板名称，第二个是项目名称，模板有webpack，webpack-sim...
VUE-CLI初始化项目
AyayaOVO的博客
06-26 1013
1、vue init命令讲解 用vue init命令来初始化项目，具体使用方法如下： vue init <template-name> <project-name> init：表示要用vue-cli来初始化项目 ：表示模板名称，vue-cli官方提供的5种模板： webpack：一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。 webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能，让
vue-cli初始化
Kevin李宏飞的博客
11-21 691
vue create vue-cli-demo
初始化创建Vue项目步骤
Tc、zyh的博客
06-10 8348
一、项目创建 1.安装 node和npm 1.首先安装node，因为都已经安装过node了，所以npm自带。 1.检查node版本 node -v 2.检查npm 版本 npm -v 2.国外的npm地址太慢，切换npm国内镜像 npm config set registry=https://registry.npm.taobao.org/ 3.查看地址是否成功可以通过npm config get registry npm config get registry 2.安装 vue-cli 脚手
（一）vue-cli初始化项目并引入ElementUI
澜岚伊人的博客
11-04 7191
摘要： 写过了一个我们产品的后台管理系统，但做完项目都没有进行总结。感觉好多还是懵懂的感觉，所以想要重新走一遍，写一个自己的项目。让自己理清思路 实现： 1、首先确认你的电脑中已经安装过Node.js了，如果没有可以百度安装配置 2、我们来说下安装vue，是用vue-cli来初始化项目吧（使用命令行工具来操作） （1） 全局安装 vue-cli (在命令行工具中输入npm install...
Vue 脚手架CLI 初始化项目
有勇气的牛排博客
02-07 1453
1 介绍 CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。 Vue CLI是一个官方发布vue.js项目脚手架 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置 2 Vue CLI使用前提 Webpack Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发的过程中提供了一套完整的功能，能够使得我们开发
vue-cli初始化项目
qq_29236119的博客
03-30 841
初始化项目时首先要弄清楚vue-cli的版本 一、3.0以下版本命令 1、首先安装vue-cli，输入命令： cnpm install -g vue-cli 2、初始化项目，输入命令 vue init webpack my-project 二、3.0以上版本（推荐使用） 1、首先安装vue-cli，输入命令： cnpm install -g @vue/cli 2、初始化项目，输入命令 vue create my-project 需要注意的是vue-cli低版本和高版本的命令是不一样的，低版本的vue
使用vue-cli2.0和vue-cli3.0初始化项目
Royal_json的博客
04-23 1343
1、使用vue-cli@2.0构建webpack项目 第一步：使用 npm install vue-cli -g //全局安装 vue-cli 脚手架 第二步：安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：vue init webpack + 项目名称。确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方...
Vue cli 脚手架安装和Vue项目创建过程
wzsrlndm的博客
09-28 176
在电脑搜索框中数如cmd打开命令提示符 然后可以在里面输入node -v注意是node空格-v 如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：下载 | Node.js 中文网 vue-cli安装 ...
解决vue-cli初始化失败的webpack-develop解决方案
vue-cli 支持多种模板，例如：webpack、browserify、pwa 等，其中 "vue-cli · Failed to download repo vuejs-templates/webpack" 错误通常是指在使用 vue-cli 初始化项目时，无法成功下载 webpack 模板的仓库。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值