腳本之家服務器常用軟件

快捷導航

Vue新手指南之創(chuàng)建第一個vue-cli腳手架程序

更新時間：2021年05月23日 11:02:16 作者：TheLightOfCode

vue-cli 是一個官方發(fā)布 vue.js 項目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項目。這篇文章主要給大家介紹了關于Vue新手指南之創(chuàng)建第一個vue-cli程序的相關資料,需要的朋友可以參考下

Vue的開發(fā)都是要基于NodeJS，實際開發(fā)采用Vue-cli腳手架開發(fā)，vue-router路由，vuex做狀態(tài)管理；Vue UI，界面我們一般使用ElementUI（餓了么出品），或者ICE（阿里巴巴出品）來快速搭建前端項目~~

1.1 什么是vue-cli

vue-cli官方提供的一個腳手架，用于快速生成一個vue的項目模板；

預先定義好的目錄結構及基礎代碼，就好比咱們在創(chuàng)建Maven項目時可以選擇創(chuàng)建一個骨架項目，這個估計項目就是腳手架，我們的開發(fā)更加的快速；

項目的功能

1.2 需要的環(huán)境

確認nodejs安裝成功：

在這里插入圖片描述

npm，就是一個軟件包管理工具

安裝vue-cli

npm instal1 vue-cli -g
#測試是否安裝成功#查看可以基于哪些模板創(chuàng)建vue應用程序，通常我們選擇webpack
vue list

在這里插入圖片描述

提示:如果vue list 查詢失敗請把 node_global目標添加到path環(huán)境變量
在這里插入圖片描述

1.3 第一個vue-cli程序

1.3.1 創(chuàng)建一個Vue項目

我們隨便建立一個空的文件夾在電腦上，我這里在D盤下新建一個目錄

在這里插入圖片描述

1.3.2 創(chuàng)建一個基于webpack模板的vue應用程序

#1、首先需要進入到對應的目錄 cdE:\IDEACode\Vue\vue
#2、這里的myvue是頂日名稱，可以根據(jù)自己的需求起名
vue init webpack myvue

一路都選擇no即可；

說明：

1.3.3 初始化并運行

cd myvue
npm install
npm run dev

命令執(zhí)行成功后會出現(xiàn)以下提示

在這里插入圖片描述

在游覽器打開剛剛的端口

在這里插入圖片描述

可以在index.js修改端口號等配置文件

在這里插入圖片描述

到此這篇關于Vue新手指南之創(chuàng)建第一個vue-cli程序的文章就介紹到這了,更多相關第一個vue-cli程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频