vue+element-ui+sass搭建環境

1.先查看是否有安裝到node，vue運行需要依賴於node的npm管理工具，安裝node就有npm

可以安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安裝vue

cnpm install vue -g

3.安裝腳手架vue-cli

cnpm install vue-cli -g

4.創建項目

打開需要存放的文件夾
vue init webpack my-demo（項目名）

5.進入文件夾，安裝依賴並跑項目

cd my-demo
npm install
npm run dev

6.安裝Element

npm i element-ui -S

7.引入Element

在main.js中引入
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

8.安裝sass

npm install node-sass --save-dev 

npm install sass-loader --save-dev

9.sass拓展名為.scss

10.路由配置

• 安裝腳手架時已經確定安裝了vue-router，所以這裡不需要再安裝了
• router/index.js內容

const routes = [
 {
 path: '',
 component: () => import('../components/HelloWorld')
 }
]
export default routes

• main.js的內容

import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
import routes from './router'
Vue.use(Router)
const router = new Router({
 mode: 'history', // history需要後端配置
 routes
})
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

• src文件目錄結構

assets // 圖片
components // 組件
router // 路由
style // 樣式
store // 狀態管理，使用vuex時需要創建的文件夾安放
app.vue
main.js

• 總結：到這裡基本上一個環境就搭建完成了，一開始搭建環境的時候會覺得不知道文件該放哪，怎麼樣引入，就無從入手，所以簡單的總結了一下從無到有的vue開發環境。