VUE CLI3.X 创建项目

Node.js环境搭建

  • Node.js基于V8引擎,可以让js代码脱离浏览器运行

  • Vue CLI3.0 需要Node.js 8.9或者更高版本。

    nvm或者nvm-windows在同一台电脑中管理多个Node版本

  • nvm github地址:https://github.com/nvm-sh/nvm


Vue CLI 3.0环境搭建

  • 卸载老版本vue-cli:npm uninstall vue-cli -g
  • 安装新版本:npm install -g @vue/cli
  • 原型开发:npm install -g @vue/cli-service-global
  • 创建项目:vue create hello-world
  • 使用图形化界面:vue ui

创建项目

  • 使用脚手架创建新项目,选择第二个,手动创建

    my-default:我原来保存好的模板;

    default:使用默认配置

    Manually select features:自定义配置

VUE CLI3.X 创建项目

  • 选择需要的功能,上下键移动,空格是选中与取消,A是全选。选择完成以后,回车进行下一步

    Babel:ES6 转 ES5

    TypeScript:使用 TypeScript 书写源码

    Progressive Web App (PWA) Support:渐进式Web应用

    Router: 路由

    Vuex: 状态

    CSS Pre-processors:CSS 预处理

    Linter/Formatter:代码风格检查和格式化

    Unit Testing:单元测试。

    E2E Testing:E2E测试

VUE CLI3.X 创建项目

  • 选择路由模式,这里使用hash模式。输入n,按回车键

VUE CLI3.X 创建项目

  • 选择语法检测规范配置,一般使用标准配置即可

VUE CLI3.X 创建项目

  • 语法检测方式,这里我选择保存就检测。

    Lint on save:保存时检查

    Lint and fix on commit:提交时检查

VUE CLI3.X 创建项目

  • 这里问babel,postcss,eslint这些配置文件怎么存放。我们选第一个。

    In dedicated config files: 单独的文件
    In package.json:存放一个文件中(package.json),第一步中的默认模式选这个

VUE CLI3.X 创建项目

  • 是否把这一次的选择作为预设,下次可以直接使用这套配置。键入N不记录,如果键入Y需要输入保存名字。

VUE CLI3.X 创建项目

  • 确定后,等待下载依赖模块。

  • 项目创建完成以后,根据提示输入命令

    cd project-name // 进入项目根目录
    run serve // 运行项目

VUE CLI3.X 创建项目

VUE CLI3.X 创建项目

上一篇:java – 在Tomcat上的webapp中使用Batik时“找不到SAX2驱动程序类org.apache.crimson.parser.XMLReaderImpl”


下一篇:vue-cli3 vue-config.js配置