Vue全家桶学习 一、vue项目环境搭建(vue-cli4.4)

Vue项目环境搭建
  1. 安装node.js、npm(npm集成在node.js,所以在安装Node.js的时候就已经自带了npm 注:.node -v 稳定版本4.4.5以上)这里不过多讲解了网上资料太多了,直接上链接 http://www.runoob.com/nodejs/nodejs-install-setup.html
  2. 脚手架搭建 Vue 工程目录 运行命令:npm install -g @vue/cli
  3. 初始化项目 运行命令 :vue init webpack pathname(项目根目录英文)
  4. 接下来是项目基本信息填写
    1. Project name projectname 项目名称(这里需要小写英文)

    2. project description ( A Vue.js project ) 可以直接回车

    3. Author (作者)

    4. Vue build ( user arrow Keys ) 直接回车就可以

      Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了

    5. Install vue-router? (Y/n) 是否安装路由这里可以安装一下 选择 Y

    6. Use ESLint to lint your code? (Y/n) 是否使用ESlint 检查你的代码(ESLint 是一个代码规范和错误检查工具),这里新手可以选择 n 不习惯ESlint使用会报一些迷之错误

    7. Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint

      Standard (https://github.com/feross/standard) 标准,有些看不明白,什么标准呢,去给提示的standardgithub地址看一下, 原来时js的标准风格
      Airbnb (https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法
      none (configure it yourself) 这个不用说,自己定义风格

    8. Set up unit tests (Y/n) 单元测试,选择 n , 熟悉单元测试的可以 Y

    9. Setup e2e tests with Nightwatch? (Y/n) e2e测试,选择 n

    10. Should we run npm install for you after the project has been created? (recommended) (use arrow Keys) 这里是选择安装方式 推荐 yarn 安全高效优美, 前提是要安装yarn (npm i yarn)

在这里插入图片描述

5.进入项目目录运行命令 :cd pathname (项目目录)
6.运行项目命令:npm run dev
在这里插入图片描述
7.项目成功运行,在浏览器界面的样式在这里插入图片描述
这样项目就正式可以进入开发阶段了,后面陆续介绍Vue全家桶的使用,纯手打发文。个人一点点小经验大神勿喷主要目的就是相互学习。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值