vue腳手架的搭建

2021-10-19 20:25:18 字數 1510 閱讀 1821

檢視版本版本號 vue -v

npm install -g @vue/cli
方法②:

yarn global add @vue/cli
有版本號:證明已安裝,假如版本為1.x或者2.x的版本,則需要更新,3.x或者4.x繼續使用即可,無需更新

更新操作:使用npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它,然後進行無版本號的操作。

新版本的腳手架專案

vue create 『專案名字』

注意:1.不要出現中文

2.不能出現特殊符號

3.不能出現大寫字母

在3.x或者4.x的版本中webpack的配置被隱藏,若想更改配置則需要則vue.config.js中寫

vue.config.js檔案:

2.x的腳手架專案建立

npm install -g @vue/cli-init(只執行1次)

vue init的執行效果將會跟[email protected]相同

vue init webpack my-project

注:在2.x中的webpack配置沒有被隱藏。

npm install -g serve
安裝完serve可以檢視打包好的專案

開啟伺服器只需要輸入 serve 『檔名稱』

即可開啟伺服器

npm install -d sass-loader node-sass
npm install -d less-loader less
npm install -d stylus-loader stylus
使用方法:

注:scoped的意思是該元件的css只在該元件中起作用

配置與vue.config.js檔案下

module.exports = ,

seconde:,

// 簡寫格式

// 模板檔案預設是 `public/subpage.html`

// 如果不存在,就是 `public/index.html`.

// 輸出檔案預設是 `subpage.html`.

subpage: 'src/main.js'    /*注意這個是*/

},/* webpack-dev-server 相關配置 */

devserver:

},},},}

引入包

import 『amfe-flexible』//適配

sass中函式:

@function px2rem($px)

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...

Vue腳手架搭建

sudo apt get install nodejs legacy nodejs sudo apt get install npm 安裝成功後檢視對應版本 npm install vuenpm install g cnpm registry vue安裝成功後檢視對應版本 npm install g...

vue腳手架搭建

一 vue cli腳手架的搭建步驟 首先,確定你的電腦上已經安裝了nodejs,可以使用npm包管理器安裝環境 1 開啟cmd命令視窗,切換到你要新建專案的資料夾下,此時可使用node v檢查node的版本,如果出現版本號則node已安裝。2 使用以下命令全域性安裝vue cli npm insta...