码迷,mamicode.com
首页 > 其他好文 > 详细

VUE CLI3.X 创建项目

时间:2019-06-27 23:10:49      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:web应用   源码   mat   直接   pac   文件中   这一   post   file   

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:自定义配置

技术图片

  • 选择需要的功能,上下键移动,空格是选中与取消,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测试

技术图片

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

技术图片

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

技术图片

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

    ? Lint on save:保存时检查

    ? Lint and fix on commit:提交时检查

技术图片

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

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

技术图片

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

技术图片

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

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

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

技术图片

技术图片

VUE CLI3.X 创建项目

标签:web应用   源码   mat   直接   pac   文件中   这一   post   file   

原文地址:https://www.cnblogs.com/tudou1179006580/p/11100112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!