vue脚手架安装

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/中的内容即可。