vue进阶1-1 - 项目搭建（vue-cli）

一、安装Nodejs

1. 点击 https://nodejs.org/en/download/ 下载并安装node。
2. 安装成功后，在终端输入 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? (recom
mended) npm              //  (recommended)：回车

五、启动项目

1. 进入项目目录： cd vue-demo
2. 安装项目所需要的依赖： npm install
3. 启动项目： 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,需要参考的童鞋可点击链接

https://github.com/graycrr/vu...