欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue-cli創(chuàng)建vue項(xiàng)目介紹

 更新時(shí)間:2022年01月23日 10:13:00   作者:累成一條狗  
這篇文章介紹了使用vue-cli創(chuàng)建vue項(xiàng)目的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1、什么是vue-cli

是vue官方提供的腳手架工具。腳手架工具簡(jiǎn)單講就是自動(dòng)將項(xiàng)目需要的環(huán)境、依賴等信息都配置好。

2、全局安裝vue-cli

(1)檢查npm 版本,建議安裝到最新版本。

【命令行查看版本號(hào)】
node -v
npm -v
【升級(jí)npm(可選操作)】
npm install -g npm

【修改為淘寶鏡像(可選操作)】
npm config set registry "https://registry.npm.taobao.org"

(2)安裝

【全局安裝 webpack】
npm install webpack -g

【webpack 4.X 開始,需要安裝 webpack-cli 依賴】
npm install webpack webpack-cli -g

【查看版本號(hào)】
webpack -v

【全局安裝vue-cli】
npm install -g vue-cli

【查看版本號(hào)】
vue -V

注:
若出現(xiàn)“Unexpected end of JSON input while parsing near”錯(cuò)誤,
命令行輸入: npm cache clean --force

3、創(chuàng)建項(xiàng)目(命令行方式)

(1)創(chuàng)建一個(gè)文件保存的路徑。比如:E:\vue\vue-demo

【命令行進(jìn)入該目錄】
cd E:\vue\vue-demo

【下載模板】
vue init webpack vue-demo

【進(jìn)入交互頁面,根據(jù)自己情況選擇】
?Project name vue-demo # 項(xiàng)目名稱,直接回車,按照括號(hào)中默認(rèn)名字(注意這里的名字不能有大寫字母,如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters)。
? Project description A Vue.js project # 項(xiàng)目描述,隨便寫
? Author # 作者名稱
? Vue build standalone # 我選擇的運(yùn)行加編譯時(shí)
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作為代碼規(guī)范.
? Pick an ESLint preset Standard # 一樣的ESlint 相關(guān)
? Set up unit tests Yes # 是否安裝單元測(cè)試
? Pick a test runner 按需選擇 # 測(cè)試模塊
? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測(cè)試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我選的NPM

(2)安裝成功后,進(jìn)入項(xiàng)目目錄

【命令行進(jìn)入該目錄】
cd E:\vue\vue-demo

【初始化項(xiàng)目】
 npm install
 
 【啟動(dòng)項(xiàng)目,根據(jù)package.json中的數(shù)據(jù)來啟動(dòng)】
 npm run serve
 
 【關(guān)閉項(xiàng)目】
 Ctrl + C
 
 【瀏覽器訪問:】
http://localhost:8080/

【項(xiàng)目打包上線】
npm run build
將打包后生成的dist 目錄中的文件拷貝到服務(wù)器的相應(yīng)地址即可(比如tomcat的webapps目錄下)。

注:
如果瀏覽器打開之后,沒有加載出頁面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js的 post

4、創(chuàng)建項(xiàng)目(圖形界面方式)

若想使用vue的UI界面來創(chuàng)建項(xiàng)目,需將vue升級(jí)到 3.0以上的版本。

【下載vue最新版】
npm i -g @vue/cli        或者   cnpm install -g @vue/cli

【打開ui界面】
vue ui

點(diǎn)擊創(chuàng)建項(xiàng)目

填寫項(xiàng)目名(盡量小寫,大寫會(huì)自動(dòng)轉(zhuǎn)為小寫),選擇npm或其他包管理器。

選擇默認(rèn)即可。

等待創(chuàng)建項(xiàng)目。命令行會(huì)自動(dòng)執(zhí)行創(chuàng)建操作。

創(chuàng)建完畢。

其余操作同上,此處不再重復(fù)。

項(xiàng)目文件結(jié)構(gòu)如下:

查看package.json,

可以使用npm run serve 來啟動(dòng)項(xiàng)目、或npm run build 來打包項(xiàng)目。

運(yùn)行起來后,

到此這篇關(guān)于使用vue-cli創(chuàng)建vue項(xiàng)目的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實(shí)現(xiàn)拖拽的簡(jiǎn)單案例 不超出可視區(qū)域

    vue實(shí)現(xiàn)拖拽的簡(jiǎn)單案例 不超出可視區(qū)域

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽的簡(jiǎn)單案例,不超出可視區(qū)域,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • Vuejs監(jiān)聽vuex中值的變化的方法示例

    Vuejs監(jiān)聽vuex中值的變化的方法示例

    這篇文章主要介紹了Vuejs監(jiān)聽vuex中值的變化的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • VUE項(xiàng)目中引入vue-router的詳細(xì)過程

    VUE項(xiàng)目中引入vue-router的詳細(xì)過程

    vue-router 也叫 vue 路由,根據(jù)不同的路徑,來執(zhí)行不同的組件,這篇文章主要介紹了VUE項(xiàng)目中引入vue-router,需要的朋友可以參考下
    2023-05-05
  • element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)

    element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)

    這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue?elementui動(dòng)態(tài)添加el-input實(shí)例代碼

    vue?elementui動(dòng)態(tài)添加el-input實(shí)例代碼

    最近遇到一個(gè)新的需求,需要?jiǎng)討B(tài)添加el-input,這篇文章主要給大家介紹了關(guān)于vue?elementui動(dòng)態(tài)添加el-input的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得

    詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得

    這篇文章主要介紹了詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • Vue中Object.defineProperty用法示例

    Vue中Object.defineProperty用法示例

    Vue中的Object.defineProperty是一個(gè)比較重要的方法,它是可以定義對(duì)象中屬性的一個(gè)方法,相比于在對(duì)象中直接定義的對(duì)象,它更具有靈活性,本文將通過代碼示例給大家簡(jiǎn)單介紹一下Vue中的Object.defineProperty,需要的朋友可以參考下
    2023-08-08
  • Vue項(xiàng)目中使用Base64

    Vue項(xiàng)目中使用Base64

    在vue項(xiàng)目中有時(shí)會(huì)使用到Base6464轉(zhuǎn)碼,現(xiàn)將自己使用的一種方法記錄下來,對(duì)vue使用Base64相關(guān)知識(shí)感興趣的朋友一起看看吧
    2024-02-02
  • 前端架構(gòu)vue架構(gòu)插槽slot使用教程

    前端架構(gòu)vue架構(gòu)插槽slot使用教程

    這篇文章主要為大家介紹了前端vue架構(gòu)插槽slot使用教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-02-02
  • 解決vue組件渲染沒更新數(shù)據(jù)問題

    解決vue組件渲染沒更新數(shù)據(jù)問題

    本文主要介紹了解決vue組件渲染沒更新數(shù)據(jù)問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02

最新評(píng)論