一、安装Nodejs
- 点击 下载并安装node。
- 安装成功后，在终端输入
npm -v,会显示npm的版本信息。
二、安装淘宝镜像
npm是nodejs的包管理工具，为了加快下载速度，可安装淘宝镜像，安装成功后可cnpm代替npm，在终端输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
三、安装vue-cli
全局安装vue-cli，在终端输入
npm install -g vue-cli / cnpm i -g vue-cli
安装成功后，可用 vue -V 查看vue版本。
四、创建vue项目
使用脚手架创建项目：vue init webpack vue-demo vue-demo为项目名称
AppledeMacBook-Pro-3:~ apple$ vue init webpack vue-demo? Project name vue-demo //（工程名）:回车? Project description A Vue.js project // （工程介绍）：回车? Author crr // (作者名)：作者名? Vue build standalone // （是否安装编译器）:回车? Install vue-router? Yes // （是否安装Vue路由）：回车? Use ESLint to lint your code? No //（是否使用ESLint检查js代码）：n? Set up unit tests No //（安装单元测试工具）：n? Setup e2e tests with Nightwatch? No //（是否安装端到端测试工具）：n? Should we run `npm install` for you after the project has been created? (recommended) npm // (recommended)：回车
五、启动项目
- 进入项目目录：
cd vue-demo - 安装项目所需要的依赖：
npm install - 启动项目：
npm run dev
注意：Vue.js 不支持 IE8 及其以下 IE 版本。
六、项目结构
.├── build/ # webpack配置文件│ └── ...├── config/│ ├── index.js # 主要项目配置│ └── ...├── src/│ ├── main.js # 应用入口js文件│ ├── App.vue # 主应用程序组件│ ├── components/ # 公共组件目录│ │ └── ...│ └── router/ # 前端路由│ │ └── ...│ └── assets/ # 模块资源（由webpack处理）│ └── ...├── static/ # 纯静态资源（直接复制）├── .babelrc # babel 配置，es6需要babel编译├── .postcssrc.js # postcss 配置├── .eslintrc.js # eslint 配置├── .editorconfig # 编辑器 配置├── .gitignore # 过滤无需上传的文件├── index.html # index.html模板└── package.json # 构建脚本和依赖关系
七、后台管理系统实战
简单的写了个后台管理系统demo,需要参考的童鞋可点击链接
