脚本宝典收集整理的这篇文章主要介绍了

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):回车

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...

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过