vue脚手架的使用，vue项目创建过程

已于 2022-08-18 08:37:42 修改
阅读量257 收藏
点赞数
分类专栏： 学习 文章标签： vue.js javascript 前端
于 2022-08-12 15:44:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45025670/article/details/126280416
版权

vue脚手架

vue-cli快速搭建vue项目的，使用webpack管理项目

  • 把vue-cli模块包安装到全局，电脑就有了vue命令，就能创建脚手架工具

  • 安装命令

    npm install -g @vue/cli

yarn add global @vue/cli

  • 检测是否安装成功

    vue -V
搭建项目

  • 创建项目

    vue create 项目名称

在这里插入图片描述

上下键选择 Manually
在这里插入图片描述

按上下键+空格键选择
在这里插入图片描述

选择2.x版本
在这里插入图片描述

写n
在这里插入图片描述

回车
在这里插入图片描述

进入项目目录

cd 项目目录
启动项目
npm run serve
项目目录结构

在这里插入图片描述

Youser511
关注
专栏目录
VUE-使用vue脚手架创建项目
Robin的博客
04-02 771
1、创建存放项目的目录 2、进入目录 按住shift键 鼠标右击，打开powershell 3、在命令行窗口执行 vue ui 打开vue项目管理器 4、创建项目 1、选择项目存放位置 2、输入项目名，选择包管理器 3、选择预设，这边选择手动配置 4、勾选相关插件 5、选择vue.js版本，路由模式，eslint配置模式 6、创建项目，不保存预设。 也可以输入预设名保存预设并创建项目 7 、等待项目创建完成 8、项目创建完成 9、启动...
使用vue-cli（vue脚手架）快速搭建项目
最新发布
2401_84435768的博客
04-27 627
1、《亿级流量Java高并发与网络编程实战》2、《分布式一致性算法开发实战 媒体宣传文案》3、《Java多线程与大数据处理实战》4、《深入浅出TCPIP和VPN》 目录一、什么是VueCLI1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。3、CLI是什么意思？4、脚手架长什么样？5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-onl
vue脚手架之登录页面跳转，js-cookie安装，axios 模块封装
weixin_42486438的博客
08-28 1389
效果图 1、在 src 目录下，新建一个 http 文件夹，在文件夹下分别建config.js，axios.js，interface.js，index.js文件 axios.js内容 //二次封装axios模块，包含拦截器等信息 import axios from 'axios'; import config from './config'; import qs from 'qs...
Vue脚手架的使用
Pig-pig-pig的博客
05-17 562
提示：本文主要对Vue-cli脚手架进行总结 文章目录前言一、创建Vue脚手架二、分析脚手架结构三、 前言 提示：这里可以添加本文要记录的大概内容： 我们已经学习了Vue里的组件化，在里面我们知道，组件一般要配合脚手架vue-cli来使用， 本篇文章将对 vue的脚手架进行总结 提示：以下是本篇文章正文内容 一、创建Vue脚手架 二、分析脚手架结构 三、 ...
Vue脚手架基本使用方法
wgchen
02-03 539
1 安装3X版本的Vue脚手架 npm install -g @vue/cli cnpm install -g @vue/cli C:\Users\Administrator>vue -V @vue/cli 4.2.2 2 创建项目图形界面启动 [root@bogon ~]# vue ui ???? Starting GUI… ???? Ready on http://localhost:8000 3 选择路径创建新项目 下一步 4 手动配置项目 5 选择开启功能 Babel 是一个工具链
Vue脚手架使用步骤
weixin_43778272的博客
07-05 390
Vue脚手架使用步骤 1、安装webpack 全局安装webpack命令行： npm install webpack -g 2、安装vue-cli脚手架构建工具 全局安装，输入命令行： npm install vue-cli -g 安装完成后执行命令: vue -V 查看版本号，出现相应得版本即为安装成功 3、通过vue-cli，初始化vue项目 通过以上几步，将我们安装脚手架所需要的环...
使用Vue脚手架创建Vue项目
m0_70955866的博客
11-04 435
5. 检查你是否安装vue/cli,只需要在命令行运行vue指令,如果不报错,则说明安装成功。Vue脚手架隐藏了所有的webpack相关的配置,若想查看具体的webpack配置,请执行。在弹出的选项中,选择你需要安装的配置项: 通过上下键进行切换,通过空格键进行是否选中。在弹出的选择中,表示是否是使用history方式创建路由:默认,选择y。参考:资料/vue.js环境搭建.docx。vue create 项目名。
vue2，vue3已经生成好的脚手架（空项目包）
07-19
vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序...
使用vue-cli（vue脚手架）快速搭建项目的方法
12-10
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个...
vue脚手架CLI的简单使用
m0_49936845的博客
04-16 1056
├── babel.config.js: babel 的配置文件。├── .gitignore: git 版本管制忽略的配置。├── package-lock.json：包版本控制文件。├── package.json: 应用包配置文件。│ ├── favicon.ico: 页签图标。│ └── index.html: 主页面。│ │── component: 存放组件。│ │── App.vue: 汇总所有组件。├── README.md: 应用描述文件。│ ├── assets: 存放静态资源。
使用Vue脚手架【Vue】
weixin_53943447的博客
04-16 698
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。②第二种就是直接复制vue.cmd所在的路径，然后不用点击新建，找到path点击编辑，在里面新建将路径放进去即可。├── babel.config.js: babel 的配置文件。├── .gitignore: git 版本管制忽略的配置。│ │── App.vue: 汇总所有组件。
vue入门（一）新建一个vue项目，搭建一个vue-cli2 脚手架（vue 项目）
weixin_44514665的博客
08-08 169
第一步 安装npm 首先Vue的安装依赖于node.js，要保证你的计算机上已经安装过node.js，如果电脑上有node.js,可以跳过node安装，如果没有就先安装node。 1.下载node 下载之后默认安装，直到完成安装 2.查看是否安装成功，可以查看安装npm 的版本 打开控制台 电脑图标键 + R 输入 cmd 然后enter 就可以进入 （或者 shift + 右键 ） 在nod...
vue-cookies的使用
weixin_30872867的博客
12-04 542
一.安装vue-cookies 　　在软件的命令行中输入以下命令: npm install vue-cookies -S 二.引入和使用vue-cookies 　　在软件的main.js中加入: import VueCookies from 'vue-cookies' Vue.use(VueCookies) 三.如果在局部使用可以用 1.设置cookies ...
vue 中 使用 vue-cookie 操作 cookie
Never-Say-Never
01-24 497
安装 npm install vue-cookies --save 在main.js引入 import VueCookies from 'vue-cookies' Vue.use(VueCookies) 使用 this.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) this.$coo...
怎么使用Vue脚手架搭建项目环境？
fish_skyyyy的博客
03-08 220
Vue 脚手架(vue-cli) 的环境搭建 关于Vue 脚手架(vue-cli) vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面。 vue 脚手架用于自动生成 vue.js+webpack 的项目模板，分为 vue init webpack-simple 项目名 和 vue init webpack 项目名两种。其本质就是给出一套文件结构，包含基础的依赖库，用户只需要
vue 中 直接操作 cookie 及 如何使用工具 js-cookie
weixin_30316097的博客
04-11 129
转载：https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); ...
vue配置用户状态管理，并使用cookie进行页面拦截
kettlo的博客
08-31 1054
vue配置用户状态管理，并使用cookie进行页面拦截 前言 ​ VueX是适用于在Vue项目开发时使用的状态管理工具。一般使用它进行用户信息暂存和状态的管理，其将信息保存在全局中，可以在各个界面组件中获取用户信息。此文章说明在脚手架中的部署步骤。 ​ cookie可以将用户信息保存在本地，方便用户在下一次进入网站的时候可以省去登录步骤直接进行登录。 目录结构 创建好简单的脚手架后在本示例中又添加了如下几个文件，其中 4 状态管理是用vuex进行状态管理的，5 路由中由界面拦截的方法。 用户状态配置 下
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
使用Vue脚手架快速创建和启动Vue工程项目的步骤
"本文介绍了如何安装Vue脚手架并使用它来创建Vue工程项目的详细步骤，包括选择项目依赖、配置项目选项以及启动项目的方法。同时，解析了Vue项目的运行机制，如组件化开发、路由管理和状态管理的基本概念。" Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值