【Vue】使用Vue cli初始化案例项目

最新推荐文章于 2022-11-21 22:34:22 发布
最新推荐文章于 2022-11-21 22:34:22 发布
阅读量125 收藏
点赞数
文章标签： vue npm yarn 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53163605/article/details/118932150
版权

本案例详细介绍了如何初始化一个vue项目

查看node、npm、vue是否安装

node -v
npm -v
vue -V

在这里插入图片描述

安装vue 3.x

npm install -g @vue/cli
npm install -g @vue/cli-init

在这里插入图片描述

基于vue cli快速初试化一个vue项目

vue init webpack [项目名]

在这里插入图片描述

跳转到项目目录下并启动项目

cd [项目目录]
npm run dev

在这里插入图片描述
在这里插入图片描述
打开网址localhost:8080
在这里插入图片描述

vue项目介绍

打开项目，目录结构如下
在这里插入图片描述

  • src 项目源码
  • static 静态资源
  • main.js 项目启动入口
  • App.vue 根组件
    在这里插入图片描述
    在这里插入图片描述
吃了一天糖葫芦!
关注
VUE-CLI初始化项目
AyayaOVO的博客
06-26 925
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初始化项目
qq_29236119的博客
03-30 791
初始化项目时首先要弄清楚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.js之使用vue-cli初始化项目
Baby_加油_的博客
06-11 1355
使用vue框架的时候，经常会用到vue的脚手架，那么怎么进行初始化呢？ 一、安装步骤 step1、安装Node.js 首先需要下载并安装Node.js，下载地址：Node官网。 测试安装是否成功，打开cmd，使用 node -v，如果显示版本号则表示安装成功。 step2、安装vue-cli 使用vue-cli（脚手架）搭建项目，vue-cli是Vue官方提供的用于搭建...
vue-cil项目初始化
qq_53222216的博客
07-10 365
vue-cil学习之旅
vue-cli初始化
最新发布
Kevin李宏飞的博客
11-21 586
vue create vue-cli-demo
vue-cli初始化项目中使用less的方法
10-18
在 Vue CLI 初始化的项目中集成 Less 作为 CSS 预处理器，可以使样式代码更易于管理和维护，利用 Less 的变量、嵌套规则、运算符等功能提升开发效率。 Less 是一种 CSS 预处理器，它允许开发者使用变量、嵌套规则、...
详解使用vue-cli脚手架初始化Vue项目下的项目结构
11-28
它极大地简化了Vue项目的初始化和配置过程，为开发者提供了现代化的前端开发流程。Vue CLI支持快速创建新项目，内置热重载、静态检查等功能，并且能够生成适合生产环境的构建配置。 使用Vue CLI的优势主要包括以下...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
使用vue-cli 初始化 vue 项目
Saladbobo的专栏
08-14 186
使用vue-cli 初始化 vue 项目 1. 安装nodejs 2.安装vue-cli npm install -g vue-cli 安装前可以通过设置代理为淘宝仓库地址，以加快下载速度。 npm config set registry https://registry.npm.taobao.org 3. 查看 V...
vue-cli 脚手架初始化项目
m0_53399639的博客
06-12 286
1. node + webpack +淘宝镜像2. 在项目根目录中 在终端里初始化项目 vue create 项目名称3.node_modules文件夹中放置： 项目依赖文件夹4.public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中。5.src文件夹（程序员源代码文件夹）： 1) assets文件夹：一般也是放置的是静态资源（一般放置多个组件公用的资源），需要注意，放置在assets文件夹
vue-cli脚手架初始化项目
zsl2010zsl的专栏
05-09 178
环境 node + webpack +淘宝镜像 1 创建项目 vue create app node-modules文件夹：项目依赖文件夹 public文件夹：一般防止一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹。 src文件夹（程序员源代码文件夹）： assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要追，放置在assets文件夹里面的静态资源，在webpack打包的时候，webp
Vue环境安装、Vue-cli安装、初始化项目
Jackson_ji的博客
04-29 682
隔了近7月没敲过代码，连最初的Vue项目初始化都忘记了，今天有时间，回忆下；之后有时间还是天天的看会，不能忘了吃饭的家伙啊~~~~ Vue环境安装 1、安装node.js（版本不得低于8）全局安装，下载node的链接路径https://nodejs.org/en/，选择带有Current的安装；步骤只需next next就行，没有确认的规范；安装的盘符，你可以自己选择，之后检查node是否安...
vue-cli 初始化大型项目
AndyDJA的博客
01-02 1189
摘要：vue-cli 1.创建一个文件夹，在cmd 命令面板中执行：npm install -global vue-cli  全局安装 vue-cli 2.利用：vue init webpack projectName(自定义项目名称) 创建一个基于 webpack 模板的新项目（） 3.进入到项目名称文件夹中执行 npm install 安装项目所需要依赖 4.运行 npm run de
Vue-Cli初始化vue项目
wuyundong123的博客
12-30 707
在实际的工作项目开发中，由于都是使用node和npm进行vue-cli的安装，所以先确保已有node和npm的环境； 查看node的版本 node -v 查看npm的版本 npm -v 一 Vue-Cli安装 vue-cli 是由 Vue 提供的一个官方 cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成 vue.js+webpack 的项目模板； 使用npm安装 npm install -g @vue/cli 查看是否安装成功： vue -V 但是由于npm.
用vue-cli初始化一个vue项目
cxu123321的博客
02-16 418
用vue-cli初始化一个vue项目 迷糊总关注 2019.03.13 13:35:28字数 640阅读 1,365 一.环境搭建 1.node下载（官网https://nodejs.org/en/download/）一路“下一步”就可以了 2.安装成功后，打开node 二.安装vue-cli脚手架构建工具：npm install vue-cli -g # 必须全局安装vu...
使用vue-cli初始化项目
糖果π
11-24 178
step1. 安装Node.js http://nodejs.cn/download/ ###查看版本node -v 查看版本npm -v step2.安装vue-cli 查看版本vue -V 查看webpack -v step3.初始化项目 vue init webpack projectName ###projectName为项目名称，可以自动生成目录及相关文件 ###在初始化的过程中会询问一些相关的说明和配置，这些说明和配置会写入package.json文件...
基于vue-cli初始化一个VUE项目
hss19214的博客
05-31 486
创建一个VUE项目： 环境准备： 操作系统：win10 已安装nodeJS，npm，cnpm 如果未完成上述安装请参考以下链接： NodeJS | npm | cnpm 安装教程 1.安装vue-cli vue脚手架： 2.输入vue init webpack my_test_vue 初始化项目： 初始化项目时的提示说明: Vue build：打包方式，回车即可； Install vue-router ：是否要安装路由，输入y 回车； Use ESLin...
使用vue-cli 初始化项目结构
weixin_43956521的博客
12-08 93
全局安装最新Vue Cli npm install -g @vue/cli yarn global add @vue/cli 查看安装版本 vue -V vue --version cd选择一个自己的项目目录就可以初始化项目了 通过vue脚手架创建自己的项目（vue-ts我自己的项目名称） vue create vue-ts 接下来按照英文提示安装自己需要的版本即可 下面以我安装的版本为例 具体操作可以参考Vue Cli 官网进行具体操作： https://cli.vuejs.org/z
Vue环境搭建与项目初始化详解：NPM、Webpack与vue-cli
只需使用`npm install -g vue-cli`或`npm install vue-cli -g`进行全局安装，然后使用`vue create project-name`来初始化项目。 对于网络环境的配置，文章提到了如何设置npm的代理，以解决在网络受限的情况下访问...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值