Vue Cli 4x 新建初始化專案

2021-10-10 13:11:39 字數 2311 閱讀 4207

vue cli 最新版本已經出到 4.5.8 了, 以往的一些配置,命令可能都不一樣了

最新的vue 專案建立不是以往的 vue init webpack 「」 這樣很可能會一直卡死,所以多看官方文件是很重要的。

那麼我們廢話不多說,開始教大家新建專案

npm install @vue/cli -g

vue create 專案名

新建專案

這裡一路回車

等待依賴安裝完成,大概100mb 左右

建立成功

新增 vue-router

vue add  router
建立router/index.js

import vue from

'vue'

import vuerouter from

'vue-router'

// 解決重複路由報錯

const originalpush = vuerouter.prototype.push

vuerouter.prototype.

push

=function

push

(location)

// 引入

vue.

use(vuerouter)

// 路由配置

const routes =

export

default

newvuerouter

()

新增vuex

建立store/index.js

import vue from

'vue'

import vuex from

'vuex'

vue.

use(vuex)

export

default

newvuex.store(,

mutations:}}

)

>

>

<

/div>

<

/template>

export

default

,this

.$store.state,

json

.parse

(localstorage.

getitem

('store'))

))},

mounted()

)},}

;<

/script>新增常用依賴

npm install axios less less-loader

設定路徑別名 @…

建立vue.config.js

// vue.config.js

const path =

require

('path');

module.exports =}},};

建立jsconfig.json

},

"exclude":[

"node_modules"

,"dist"

]}

配置 main.js
import vue from

'vue'

import router from

'./router'

import store from

'./store'

vue.config.productiontip =

false

newvue()

.$mount

()

>

>

/>

div>

template

>

專案初始化 vue cli

一 輸入命令 vue init template name project name template name 有5種 webpack 常用 webpack browserfy browserfy project name 二 之後跟著提示輸入命令 porject name 專案名 盡量不要大寫 ...

VUE CLI初始化專案

用vue init命令來初始化專案,具體使用方法如下 vue init init 表示要用vue cli來初始化專案 表示模板名稱,vue cli官方提供的5種模板 webpack 乙個全面的webpack vue loader的模板,功能包括熱載入,linting,檢測和css擴充套件。webpa...

新建專案,初始化git

git 全域性設定 git config global user.name 你的使用者名稱 git config global user.email 你的郵箱 建立新版本庫 git clone http 網域名稱 專案路徑.git cd 本地專案路徑 touch readme.md git add ...