2019-08-01 Vue-使用脚手架vue-cli搭建vue+webpackp配置项目

创建项目

1. 全局安装vue-cli

cnpm install @vue/cli -g

// 查看安装成功
vue --version
// 输出 vue版本2.9.6

2. 生成项目模板
   有很多模板，其中推荐使用webpack-simple(个人)和webpack(企业)两种，这里使用webpack模板

vue init webpack vue-webpack-demo
// 进入到生成项目里面
cd vue-webpack-demo
// 安装依赖 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
或者
yarn install 

目录结构：

3. 本地启动项目：

npm run dev
// 输出
...
Your application is running here: http://localhost:8080

4. 打开页面，我这是已编辑过的
   

备注：如果不想使用webpack模板自带的Eslint缩进格式，可以在webpack配置文件中旁屏蔽掉

最后，如果大家使用图表插件的话，推荐使用v-charts，这是饿了么团队在echarts插件的基础上开发的，非常好用，但是不要使用vue-photo-preview插件会报错
github地址：https://v-charts.js.org