Vue-cli + ElementUI環境搭建

1.node.js安裝

官網上下載node.js安裝包，直接安裝即可。安裝完后查看nodejs版本:node -v.

出現以下信息說明安裝成功。

$ node -v

v8.12.0

2.安裝vue-cli

輸入命令npm install vue-cli -g

在mac下可能會出現如下錯誤： 

npm ERR! The operation was rejected by your operating system.

npm ERR! It is likely you do not have the permissions to access this file as the current user

 

該錯誤是因為root權限問題，解決方式很簡單，在命令前加sudo即可，即輸入命令：sudo npm install vue-cli -g

 

安裝完成后，查看vue-cli版本信息，以確定是否安裝成功，輸入命令：vue -V   （注意：V 要大寫）

出現以下信息說明安裝成功

$ vue -V

2.9.6

 

3.創建項目

cd到需要創建項目的文件夾，運行命令 vue init webpack my-project   (my-project為項目名稱）

? Project name my-project

? Project description 測試項目

? Author

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recom

mended) no

 

   vue-cli · Generated "my-project".

 

# Project initialization finished!

# ========================

 

To get started:

 

  cd my-project

  npm install (or if using yarn: yarn)

  npm run lint -- --fix (or for yarn: yarn run lint --fix)

  npm run dev

  

Documentation can be found at https://vuejs-templates.github.io/webpack

 

4.ElementUI安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

 

安裝完ElementUI包以后，將Element引入到項目中。

在 main.js 中寫入以下內容：

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }); 

以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨引入。

至此，一個基於 Vue 和 Element 的開發環境已經搭建完畢，現在就可以編寫代碼了。

其他一些常用組件的安裝

1.Echarts安裝

npm install echarts --save

import echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts //引入組件

 

2.font-awesome字體

npm install font-awesome --save

import 'font-awesome/css/font-awesome.min.css'

 

3.sass-loader 和 sass-loader

npm install sass-loader --save;

npm install sass-loader --save;

4.axios

npm install --save axios

Vue.prototype.$axios = axios;