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;