一、新建vue項(xiàng)目

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到鄒城網(wǎng)站設(shè)計(jì)與鄒城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鄒城地區(qū)。

1、首先需要下載nodejs，安裝后打開(kāi)命令窗口可以使用npm包管理工具

npm集成在node中的，所以直接輸入npm-v查看npm的版本信息

2、npm有些資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗，所有我還需要npm的國(guó)內(nèi)鏡像---cnpm。

3、在命令行中輸入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安裝完成，就可以使用cnpm安裝依賴包了，這里說(shuō)一下最好用npm安裝，cnpm有時(shí)依賴下載不全，如果npm下載緩慢可以嘗試cnpm安裝依賴包。

4、安裝vue-cli腳手架構(gòu)建工具。在命令行中運(yùn)行命令 npm install -g vue-cli ，然后等待安裝完成。

5、用vue-cli構(gòu)建項(xiàng)目。選定目錄，存放新建的項(xiàng)目

6、在桌面目錄下，在命令行中運(yùn)行命令 vue init webpack firstVue 。解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。其中firstVue是整個(gè)項(xiàng)目文件夾的名稱。

7、運(yùn)行初始化命令的時(shí)候回讓用戶輸入幾個(gè)基本的選項(xiàng)，如項(xiàng)目名稱，描述，作者等信息，如果不想填直接回車(chē)默認(rèn)就好。

8、打開(kāi)firstVue文件夾，項(xiàng)目文件如下所示。

9、安裝依賴包（記住一定要在新建的項(xiàng)目文件夾目錄下），通過(guò)npm install命令

10、安裝好依賴后，運(yùn)行項(xiàng)目，通過(guò)npm run dev實(shí)現(xiàn)，一般默認(rèn)是8080端口，打開(kāi)瀏覽器輸入localhost:8080

11、8080端口如果被占用了，需要修改一下配置文件config/index.js

更改端口后顯示這樣：

二、下面引入Element

1、在當(dāng)前目錄下，運(yùn)行:npm i element-ui -S

2、在src/main.js中添加代碼（紅色的）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'	//手動(dòng)變紅
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手動(dòng)變紅
//具體路徑有的不同，vue運(yùn)行報(bào)錯(cuò)請(qǐng)看第五點(diǎn)
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手動(dòng)變紅
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

3、然后在.vue文件里就直接可以用了，如：在src/components/Hello.vue做一下修改

<template> 
 <div class="hello"> 
 <h2>{{ msg }}</h2> 
 <h3>Essential Links</h3> 
 <el-button>默認(rèn)按鈕</el-button> 
 <el-button type="primary">主要按鈕</el-button> 
 <el-button type="text">文字按鈕</el-button> 
 </div> 
</template> 
 
<script> 
export default { 
 name: 'hello', 
 data () { 
 return { 
 msg: 'Welcome to Your Vue.js App' 
 } 
 } 
} 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
h2, h3 { 
 font-weight: normal; 
} 
 
ul { 
 list-style-type: none; 
 padding: 0; 
} 
 
li { 
 display: inline-block; 
 margin: 0 10px; 
} 
 
a { 
 color: #42b983; 
} 
</style> 

4、再次運(yùn)行

5、上述（3）有時(shí)會(huì)報(bào)錯(cuò)，一是查看element-ui的index.css路徑是否正確，第二因?yàn)閳?bào)錯(cuò)會(huì)顯示找不到文件，需要在build/webpack.base.conf.js文件中添加一段代碼，如下。

6、現(xiàn)在運(yùn)行起來(lái)了

以上這篇vue的安裝及element組件的安裝方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

標(biāo)題名稱：vue的安裝及element組件的安裝方法
標(biāo)題來(lái)源：http://vcdvsql.cn/article36/iighsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、服務(wù)器托管、Google、App開(kāi)發(fā)、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)