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: '<App/>'
})

• src文件目录结构

assets // 图片
components // 组件
router // 路由
style // 样式
store // 状态管理，使用vuex时需要创建的文件夹安放
app.vue
main.js

• 总结：到这里基本上一个环境就搭建完成了，一开始搭建环境的时候会觉得不知道文件该放哪，怎么样引入，就无从入手，所以简单的总结了一下从无到有的vue开发环境。