vue的簡介及@vue/cli?腳手架的使用示例
1.vue簡介:
vue 是一個 漸進式的 javascript 框架!
官網(wǎng)地址: Vue.js - 漸進式 JavaScript 框架 | Vue.js
Vue是一個MVVM的框架 (MVVM:一種軟件架構模式)
2.腳手架:腳手架是一個通用概念,幫助搭建項目的工具(以vue2為例)
什么是vue腳手架呢?
vue官方提供的一個全局命令工具,可以 快速創(chuàng)建一個vue項目 的基礎架子
vue腳手架的基本使用:
打開命令行、依次輸入
1. 全局安裝,輸入如下命令:(tip:要先提前安裝好node.js的包管理工具npm哦)
npm i @vue/cli -g 或 yarn global add @vue/cli
2. 查看vue版本:
vue --version 或 vue -V
3. 初始化一個vue項目,并選擇版本,小編選擇的是vue2版本:
vue create 項目名(不能用中文)
創(chuàng)建項目后會生成項目目錄結構,腳手架項目里各個文件及代碼都有什么作用呢?
4.切換目錄進入項目根目錄,并運行項目。
cd 項目目錄 npm run serve //npm run的命令都在package.json
項目啟動后就可以在瀏覽器輸入下面地址訪問項目了
如何覆蓋腳手架下的webpack配置:
1. 注意:我們在項目無法找到webpack.config.js文件,因為vue把它隱藏 了 。
2. 如果需要覆蓋webpack的配置,可以修改vue.config.js文件,覆蓋webpack配置vue.config.js文件
如果端口號被占用無法訪問項目,可以在vue.config.js文件中修改端口號:
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, //修改端口號 devServer: { port: 4090 }, //關閉代碼檢查,初學者建議添加,vue語法較嚴格,不添加可能有不必要報錯提示 lintOnSave: false })
到此這篇關于vue的簡介及@vue/cli 腳手架的使用的文章就介紹到這了,更多相關vue cli 腳手架使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
如何寫好一個vue組件,老夫的一年經(jīng)驗全在這了(推薦)
這篇文章主要介紹了如何寫好一個vue組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)(附Demo),文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-06-06Vue中el-tree樹全部展開或收起的實現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07