您好,登錄后才能下訂單哦!
一、新建vue項(xiàng)目
1、首先需要下載nodejs,安裝后打開命令窗口可以使用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)目名稱,描述,作者等信息,如果不想填直接回車默認(rèn)就好。
8、打開firstVue文件夾,項(xiàng)目文件如下所示。
9、安裝依賴包(記住一定要在新建的項(xiàng)目文件夾目錄下),通過(guò)npm install命令
10、安裝好依賴后,運(yùn)行項(xiàng)目,通過(guò)npm run dev實(shí)現(xiàn),一般默認(rèn)是8080端口,打開瀏覽器輸入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è)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。