vue程序搭建

nodejs
vue的安装依赖于node.js,要确保你的计算机上已安装过node.js。可进入cmd编辑器，输入命令 node -v进行查看。

npm安装
（也可以 淘宝cnpm 淘宝镜像，用淘宝镜像的cnpm来代替npm的安装，速度会快很多）

 

安装Vue框架 npm install -g vue-cli （cnpm install -g vue-cli）
// npm install vue-cli -g ???

 

输入vue list可以查看vue可以用的模板
vue init webpack projectName 创建一个基于webpack模板的新项目
其中，我们主要在src目录中修改，这个项目刚开始还只是一个结构框架，整个项目需要的依赖安装资源都还没有安装，

接下来我们需要安装依赖资源
cd d:\nodeworkspace\xxx 进入项目路径
npm install 批量安装项目依赖文件
cnpm run dev 启动项目
浏览器输入http://localhost:xxxx
yarn
yarn install
...
..

├── README.md // 项目说明文档
├── node_modules // 项目依赖包文件夹
├── build // 编译配置文件，一般不用管
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 项目基本设置文件夹
│ ├── dev.env.js // 开发配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件
├── index.html // 项目入口文件
├── package-lock.json // npm5 新增文件，优化性能
├── package.json // 项目依赖包配置文件
├── src // 我们的项目的源码编写文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始项目资源目录，回头删掉
│ │ └── logo.png
│ ├── components // 组件目录
│ │ └── Hello.vue // 测试组件，回头删除
│ ├── main.js // 主配置文件
│ └── router // 路由配置文件夹
│ └── index.js // 路由配置文件
└── static // 资源放置目录

 

关注：
微信开发者工具

vant轻量可靠的移动端Vue组件

ES6基础语法之export default方法

axios

Echarts：准备工作 创建自己的工程和安装echarts
mkdir myProject
cd myproject

在myProject目录下使用命令行，初始化工程的npm环境并安装echarts
npm init
npm install echarts --save

通过npm安装的echart会出现在myProject/node_modules目录下，从而直接在项目代码中得到echarts

使用构建工具（如 rollup、webpack、browserify）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。

npm install rollup --save-dev

npm install rollup-plugin-node-resolve --save-dev

npm install rollup-plugin-uglify --save-dev