【Vue】如何创建Vue项目
1.安装node
下载地址:http://nodejs.cn/
下载完成后,执行安装程序,直接进行安装即可
安装完成后,打开命令窗(cmd)
输入 node -v 和 npm -v 可查看安装的 node.js 和 npm 的版本号
2.安装编辑器
vscode:下载地址:https://code.visualstudio.com/
3. 安装Vue
● 缺使用 npm 进行安装
缺点:安装速度慢,因为资源在国外,可以使用国内镜像
● 使用国内镜像资源安装
i. 首先切换淘宝镜像
npm config set registry https://registry.npm.taobao.org
ii. 安装Vue
使用 npm 安装 vue 的脚手架
npm install -g @vue/cli
4. 创建Vue项目
4.1. 创建文件
创建文件夹用vscode打开,点击终端按钮,cd进入到你要创建的文件夹里
cd vuetest01
输入命令
vue create vue01
4.2. 选择配置信息
● 通过上下方向键选择,然后回车确认
选择 Manually select features 自定义配置
● 之后按空格键选择要安装的资源配置,带 * 号说明选中了
● 选择版本:选择vue 2.x
● 路径(路由)模式选择
是否使用 history router ?
● 选择CSS预处理语言
less:主要解决浏览器兼容,简化CSS代码
● 选择代码检查和格式化配置
● 选择语法检查方式
● 选择存放配置的地方:把babel,postcss,eslint这些配置文件放哪
● 是否保存刚刚你配置好的
选择 N 不报错,选择 Y 保存,选择保存后,需要填写名字
4.3. 启动项目
● 进入 vue01的路径里
cd vue01
● 执行启动命令
npm run serve
PS:如有错误,欢迎指正~
【Vue】如何创建Vue项目相关推荐
- Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程 当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析 首先从package.json中的脚本配置来看,np ...
- VS Code安装VUE及创建VUE项目
VS Code安装VUE及创建VUE项目 一.在搭建vue的开发环境之前,先下载node.js,vue的运行是要依赖于node的npm管理工具来实现,下载地址:http://nodejs.cn 二.n ...
- 使用Vue cli创建Vue项目
使用Vue cli创建Vue项目 第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
- Vue - vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决 一. 页面显示空白 二. 背景图片不显示 一. 页面显示空白 解决方法: config > index.js ...
- 使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目 什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
- Vue脚手架创建TS项目
What is TS? TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript. TS的强大吸引了许许多多的前端开发者学习使用. TS最大的特点,就是在JavaS ...
- Vue vscode 创建 vue 项目流程【超详细】
文章目录 一.安装node 二.配置淘宝镜像 三.配置 vscode(win10) 四.全局安装脚手架 五.创建项目 六.进入项目 七.项目结构 一.安装node 请在官网下载安装:https://n ...
- vue - - - - vite创建vue3项目(不使用TS)
vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...
- 第一个vue案例 创建vue实例化对象
Vue的使用 1.先导入vue.js <script src="vue.js"></script> 2.创建vue实例化对象 < ...
- 【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
Vue3 安装 在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...
最新文章
- 【MIT Sam Hopkins教授】如何读论文?How to Read a Paper
- C语言编译、链接过程探究
- 专访iOS开发框架BeeFramework作者郭虹宇
- Google面试题——及答案
- apt-get更新软件包_如何使用Apt-fast加速软件包下载和更新
- UVa 11136 - Hoax or what
- Rails 3:提高Ajax应用速度
- C# MVC的博客开发(二)登录
- c语言中的所有关键字,C语言中的32个关键字
- UVa 201 Square
- java程序动态加载jar包,并调用其中的方法
- TWaver初学实战——基于HTML5的交互式地铁图
- java点击登录实现跳转_页面跳转的简单实现(单点登录)
- Java实现 已知ListString list = new ArrayListString();list .add(张三丰,北京);......要求:求出每个地区有多少人,都是谁?
- html超链接自动下划线,html超链接下划线应该加入吗?
- 赵伟国回应华为“平衡者”标签:做个老二、老三也可以
- 一、DC DC电源转换电路设计
- re学习笔记(57)BUUCTF-re-[FlareOn4]login
- python 堆叠柱状图,Python可视化matplotlib12-垂直|水平|堆积柱形图详解
- 鸿蒙系统打王者荣耀卡不卡,鸿蒙系统会不会越用越卡?鸿蒙系统会影响王者荣耀吗?...
热门文章
- 前端vue uni-app仿企查查、天眼查关联投资机构 股权结构 树形结构 控股结构
- android shape 绘制气泡图,R语言基础绘图——气泡图
- C#开发微信公众号(3)---创建菜单
- 洁净工程施工建设洁净室工程
- yandex浏览器新标签页按钮显示俄文的解决方案
- codeforces算法题和男人人生三禁忌
- 一些提高Android开发效率的工具方法
- android调用相机拍照返回的照片大小太小,变得模糊
- excel怎么把竖排变成横排_excel录入技巧:如何进行日期格式的转换
- 洞见数字时代的创新原力,数云原力大会暨2023TECH第五届数字中国技术年会开幕