vue进阶1-1 - 项目搭建(vue-cli)

in 系统环境
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

一、安装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):回车

clipboard.png

五、启动项目

  1. 进入项目目录: cd vue-demo
  2. 安装项目所需要的依赖: npm install
  3. 启动项目: npm run dev

clipboard.png

注意: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,需要参考的童鞋可点击链接

clipboard.png

https://github.com/graycrr/vu...
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看