Vue脚手架搭建以及创建Vue项目流程
VUE脚手架搭建流程
- 安装 Node.js(推荐一个网站:http://nodejs.cn/)
- 下载安装完成之后进行测试,记住安装位置
接下来配置环境变量
1.添加NODE_PATH的一个环境变量
2.在path中添加上这个变量,变量值为安装node.js的路径
node_cache和node_global是后面创建的文件夹,后面有讲到,创建的位置,我在这里放到了node.js文件夹下,也可以自定义文件夹路径
四个path分别代表:添加了NODE_PATH这个变量名,添加这个名下面的两个文件夹等,最后那个路径也要配一下,不然安装淘宝镜像会有问题
node -v 测试 node 是否安装成功以及检查 node 版本
npm -v 测试 npm 是否安装成功以及检查 npm 版本
效果:
提示:如果碰到下面情况
可能原因:
可能是C:\Users\Administrator(users)目录下的.npmrc里的配置问题,把里面的文件改成自己需要的路径,比如我想放到node.js文件夹下
prefix=D:\应用程序\node.js\node_global
cache=D:\应用程序\node.js\node_cache
- 配置 npm 下载插件的默认安装目录和缓存日志目录,
注意:因为有的人电脑权限不足,可以提前先做安装目录中创建 node_global 和 node_cache 文件夹。
注意:路径需要根据自己的在第二步选择的位置进行配置
打开 cmd 窗口,依次输入配置命令
npm config set prefix "D:\应用程序\node.js\node_global"
npm config set cache "D:\应用程序\node.js\node_cache"
输出效果:
安装国内淘宝镜像
安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
测试命令:
cnpm -v
安装 Vue 脚手架
脚手架安装命令:
一共下面两种安装方式
因为npm安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事,第二种方式是cnpm国内淘宝镜像
本次演示选择第二种安装方式(安装淘宝镜像)
npm install -g @vue/cli
cnpm install -g @vue/cli
测试命令:
vue -V(这里是大写的 V)
卸载命令:
npm uninstall -g @vue/cli
这里我们采用第二种,采用国内镜像的方式进行安装:
效果:
测试脚手架:
到这为止,Vue 脚手架已经安装完成了。但是有两个概念需要区分开:
我们学习的 Vue 版本的 2.X,脚手架的版本是 4.5.12
Vue 可以理解为中式建筑风格,经过更新升级,现在是 2.X 版本
Vue 脚手架可以理解为盖房包工队,也在不断改造,现在是 4.5.12
Vue项目创建
Vue 脚手架创建项目有两种,一种是命令行创建方式,一种是图形化界面方式。
第一种命令行创建方式:
第一步、创建 Vue 项目所在文件夹
第二步、在文件夹中打开 cmd
第三步、创建 vue 项目
创建命令:vue create 项目名;
命令行操作:空格是选中或取消、方向键选择、A 是全选、回车是下一步、
第四步、按键盘上下键可以选择默认(default)还是手动(Manually):
这里我们选择 Manually
第五步、选择项目的配置:
这里我们选择的是 Vue 版本选项和 Babel, 前者可以选择 Vue 的版本, 后者将高阶的 ES 转为低阶的 ES5进行兼容适配,其他选择我们放到了最后解读。
第六步、选择将配置存放方式
说明:
In dedicated config files: 单独保存在各自的配置文件中
In package.json: 保存在 package.json 文件中
第七步、是否保存为未来项目的预配置
是否记录一下本次配置,以便下次使用这套配置,需要输入 Y 和名字,取消输入 N:
第八步、回车确定,等待安装
回车确定之后,等待 Vue-CLI 创建项目完成:
第九步、安装结束,测试运行
回车确定之后,等待 Vue-CLI 创建项目完成:
进入你的项目目录:cd 项目名
启动开发服务:npm run serve
ctrl + c 停止
运行成功,接下来我们可以在浏览器中打开项目:
第二种图形化界面创建方式:
(1) 第一步、创建 Vue 项目所在文件夹
(2) 第二步、在文件夹中打开 cmd
(3) 第三步、输入命令打开图形化界面
命令:vue ui
(4) 第四步、在打开的浏览器中,选择创建,核对项目目录,创建项目
(5) 第五步、输入项目名,选择基本配置
(6) 第六步、选择项目预设是默认(default)还是手动(Manually)
(7) 第七步、选择项目的配置和配置存放方式:
(8) 第八步、是否保存为未来项目的预配置:
(9) 第九步、等待安装,测试运行:
点击【任务】
点击【serve】
点击【运行】
查看仪表盘状态
绿色通过点击【启动 app】
红色报错点击【输出】
到这为止,我们已经掌握了两种方式,虽然我们是在电脑的 CMD 中运行的命令,但是这些命令也可以运行在编译软件的终端控制台中。
项目结构解读
接下来,我们开始解析 Vue 脚手架项目的项目结构,熟悉结构才能更快速的开发。
node_modules:依赖包目录
node 提供的管家,用于提供第三方依赖,依赖内部的依赖也会进行关联导入。存放 npm 命令下载的开发环境和生产环境的依赖包。
public:静态资源目录
index.html: 入口页面
可以存放公共资源,图片、模板界面等
src 目录:所用的项目结构,所有开发内容都在 src 中
以后都在这个目录下写代码、存放项目源码及需要引用的资源文件。
assets 存放项目中需要用到的资源文件,如 css、js、images 等
componens 存放通用公共组件
views 存放路由视图组件
App.vue 所有 vue 组件入口,根组件
main.js 主入口 js
package.json: 包管理配置文件
项目修改测试
这里我们先解读一下 App.vue
这里我们将图片替换成自己导入的图片,并注释掉 HelloWorld 组件的使用
保存代码并刷新页面之后,页面显示的正式我们的更换的图片:
通过上边的操作,大家会有一个感觉,Vue 脚手架项目并不是那么难。当然也需要我们不断的去熟悉项目结构。
Vue脚手架搭建以及创建Vue项目流程相关推荐
- Vue脚手架搭建及vue项目创建【详细教程】
目录 Vue脚手架 环境安装 Vue项目创建 Vue项目目录结构 项目运行流程 组件结构 Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具 ...
- Vue笔记——搭建脚手架并快速创建Vue项目
现在的Vue脚手架已经升级到3.x版本,即vue-cli3. 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程,以及使用新旧版本脚手架创建项目的过程. 下面的安装 ...
- vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
- 搭建环境创建vue项目
搭建环境创建vue项目 1.安装npm 2.使用淘宝NPM镜像 3.项目初始化 4.命令行创建项目 1.安装npm 下载对应你电脑系统的Node.js版本:下载 | Node.js 中文网 具体安装步 ...
- Vue 脚手架搭建目录及文件详解
vue脚手架搭建在各大前端网站都有详解,这里就不多作介绍,此文章主要介绍脚手架搭建后的目录结构,以及配置文件的详解. 1. 目录结构 目录结构如下: 我们来介绍一下这些目录: 一级目录 build: ...
- vue ui工具来创建vue项目(IDEA)
使用vue ui工具来创建vue项目(IDEA) 1.下载node.js 首先我们上node.js官网, 下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境 2.检查是否 ...
- 【Vue工程】001-Vite 创建 Vue-TypeScript 项目
[Vue工程]001-Vite 创建 Vue-Ts 项目 文章目录 [Vue工程]001-Vite 创建 Vue-Ts 项目 一.环境 二.创建项目 1.pnpm 创建 Vite 项目 2.设置项目名 ...
- Vue知识点整理(三)- Vue脚手架(1)- 初始化Vue脚手架、简单分析Vue脚手架结构
目录 一.初始化Vue脚手架 二.简单分析脚手架结构 一.初始化Vue脚手架 第一步(仅执行一次):全局安装 @vue/cli 在 命令提示符内输入(命令提示符 可由 win+R 调出 运行 界面,输 ...
- Eclipse中创建SpringBoot项目流程,及报错解决方案
Eclipse中创建SpringBoot项目流程,及报错解决方案 参考文章: (1)Eclipse中创建SpringBoot项目流程,及报错解决方案 (2)https://www.cnblogs.co ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
最新文章
- 绝对定位下margin的作用
- WR:Tetrasphaera PAO 代谢中的储能物质与微生物多样性及除磷效能之间的关系
- java数据库视图工具_数据库视图工具类
- Android MuPDF 部署
- open-falcon采集的一些指标及说明
- PHP实现伪静态化页面的具体实现方式
- PADS layout 元件之间尺寸标注
- Atitit 常见数据结构之编程语言源文件与编译文件 目录 1.1. 通过反射api得到结构	1 1.2. 通过源码ast信息	1 2. 常见语言	1 2.1. Php ast 解析	1 2.2.
- wince植入胎压监测_wince设备通过USB连接线上网指南(原创)(测试成功)
- 机器学习进阶路上不可错过的 28 个视频
- 计算机的音标英语,英语国际音标
- 「抖音同款播放器」上市:卡顿、黑屏和模糊,这些技术来解决
- 最优DP转LVDS解决方案|低成本DP to LVDS转换设计|CS5211方案优势
- Base64 编码整理
- 可控源音频大地电磁理论基础
- Python模拟鼠标键盘:pykeyboard库的使用
- 桌面ICON的红图标
- form表单的enctype
- 孙陶然:核心价值观是企业用人的“一票否决权”
- 中级运维这么学才有意思