vue脚手架安装

vue脚手架安装,第1张

vue脚手架安装

1. 脚手架:

 如何:

  1. 安装脚手架的工具命令: 

    npm i -g @vue/cli   电脑安装完命令后  :  直接创建  vue create 文件夹名字

  2. 用命令反复创建脚手架:

    cd 要保存项目的文件夹完整路径

比如: cd C:\xampp\htdocs\dd_VUE\day04

    用vue命令工具,创建一个项目的脚手架代码

    1. Your connection to the default npm registry seems to be slow.

   Use https://registry.npm.taobao.org for faster installatio

n? (Y/n)  n

    2. ? Please pick a preset: (Use arrow keys)

      default (babel, eslint)

    > Manually select features

    3. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

   

>(*) Babel 将脚手架中浏览器不认识的一切东西翻译为浏览器认识的。


  必选 相当于 翻译官

 ( ) TypeScript 更严格的javascript,ng框架使用

 ( ) Progressive Web App (PWA) Support

 (*) Router 必选

 (* ) Vuex 为下一阶段做登录/购物车做准备

 ( ) CSS Pre-processors

 ( ) Linter / Formatter 代码格式检查工具,要求过于变态

 ( ) Unit Testing

 ( ) E2E Testing

    4. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

     history模式可去掉地址栏中的#

     但需要服务端同步配置重定向,才能让客户端支持

     所以,学习时,不用启用history

    5. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

  In dedicated config files

> In package.json  //在package.json一个文件中,保存所有配置信息

    6. Save this as a preset for future projects? (y/N) N

     是否保存以上配置步骤的选项为今后所有项目的默认配置。


不保存。


因为不同项目需要的组件可能不一样。


 

  3. 运行脚手架项目: npm run serve

    临时启动一个简易版的调试服务器来宿主html,css,js

    将脚手架中浏览器不认识的代码编译为浏览器认识的代码

    在默认: http://localhost:8080/

    打开浏览器在地址栏中: http://localhost:8080/

    问题: npm run serve仅临时编译代码,并运行,不产生最终编译结果。


就不能部署上线。


    解决: npm run build

     将脚手架中浏览器不认识的代码编译为浏览器认识的代码

     将编译后的代码压缩为统一的文件。


    将来: 往新浪云上拷贝时,只拷贝dist/中的内容即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/586380.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存