项目搭建所用技术
vue+webpack+ElementUi+ECharts+sass
步骤
首先要安装node.js ,http://nodejs.cn/download/ 下载合适的版本安装就好了;我们本章主要讲如何让项目运行起来.
1.进入到你的文件目录,打开cmd,;
2.输入 vue init webpack ‘你项目文件名’;
3.接下的文件配置你可以一路回车就可以搞定,提示(ESLint)这一栏可以选N,这是一个代码规范和错误检查工具;
4.等它 installing Project;
5.cd ‘你的文件名’,进入项目目录,npm install 安装依赖
6.然后安装 ElementUi, npm install element-ui ,出现 +element-ui@版本号 就证明安装成功;
7.安装ECharts 同样的方式 npm install echarts ,出现 +echarts@版本号 就证明安装成功;
8.安装sass 同样的方式 npm install node-sass --save-dev , npm install sass-loader --save-dev ,出现sass-loader@版本号 就证明安装成功;
9.这样项目就搭建好了,直接 npm run dev ,默认地址http://localhost:8080,直接浏览器访问就可以了。是不是很简单。
知识点
1.想每次运行项目浏览器自动打开,可以进入项目config/index.js,把里面的autoOpenBrowser: false, 改为true就好了。
2.想在页面使用sass 在vue页面的style标签加上 lang=‘scss’,注意不是sass。
3.调用elementui,在src文件的main.js 里面加上:
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI);
(ElementUI具体使用方法进入http://element-cn.eleme.io/#/zh-CN/component/installation)
4.调用echarts,在src文件的main.js 里面加上:
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts;
(echarts 具体使用方法进入http://echarts.baidu.com/index.html);
你好! 我是第一次写博客,可能写得不是很好,希望大家多多给我意见,谢谢。