Vue脚手架使用步骤

Vue脚手架使用步骤
1、安装webpack

全局安装webpack命令行： npm install webpack -g

2、安装vue-cli脚手架构建工具

全局安装，输入命令行： npm install vue-cli -g

安装完成后执行命令: vue -V 查看版本号，出现相应得版本即为安装成功

3、通过vue-cli，初始化vue项目
通过以上几步，将我们安装脚手架所需要的环境和工具都准备好好了，下面就可以使用vue-cli来初始化项目。

(3.1) : 新建一个mySelf（项目名）文件夹来放置项目，
在新建文件夹的上一级文件夹右键打开命令行工具，输入命令行：vue init webpack mySelf(项目名)

注：项目名不能大写，不能使用中文

解释一下这个命令，这个命令的意思是初始化一个vue项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中mySelf是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

(3.2) : 以下是脚手架安装过程（安装步骤解析在图片下面）

vue-cli初始化项目选项配置详细解析

(3.3）如何运行项目
1.进入你刚才创建在my-self项目的文件夹里面,我是在D盘里面创建的，我在D盘，需要进入自己创建的文件夹里面

2、安装项目依赖。命令行： npm install。前面在项目初始化的时候，已经存在了package.json文件，直接使用npm install 安装项目所需要的依赖，否则项目不能正确运行。
创建完成的“vuetext1”目录如下：

3、到这里，我们已经成功使用vue-cli初始化了一个vue项目。
启动项目：
在my-self目录运行命令行npm run dev或者npm start，启动服务，服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图。

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他vue项目运行的时候，可以使用ctrl+c来中断运行。
4、修改端口，可以在下图文件夹中修改

Vue脚手架使用步骤相关推荐

Vue脚手架创建步骤
配置完node环境之后,使用 npm 全局安装 vue-cli : 安装命令: npm install @vue/cli -g 安装完成之后创建一个Vue项目,my-test这个就是项目名 vue c ...
vue脚手架安装步骤vue-cli
1.环境搭建安装node.js: 从node.js官网下载并安装node,安装过程很简单. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3 ...
vue-cli2.x旧版本卸载不掉的问题解决方案（亲测+踩坑）附Vue脚手架安装教程
旧版本卸载问题说明 vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本) 问题解释首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手 ...
Vue开发项目入门——Vue脚手架
1.什么是Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程.配置第三方依赖.编译vue工程. 特别注意:Vue脚手架是用来方便开发的, ...
Vue 脚手架-基本使用
1.脚手架-介绍与安装 webpack自己配置环境繁琐官方提供脚手架, 快速搭建项目基础结构安装@vue/cli全局模块包, 得到Vue命令, 用于以后创建Vue脚手架项目步骤: 1.全局安装@v ...
教你用webpack搭一个vue脚手架[超详细讲解和注释！]
1.适用人群 1.对webpack知识有一定了解但不熟悉的同学.2.女同学!!!(233333....) 2.目的在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学 ...
关于npm和yarn 安装vue脚手架
第一篇博客有点小紧张.轻喷~ 第一步:安装node.js 地址 --------https://nodejs.org/en/ 详细步骤这里就不写了可以去看地址 ----- ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例
Vue-CLI 基本使用命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算 ...

Vue脚手架使用步骤

Vue脚手架使用步骤相关推荐

最新文章

热门文章