zoukankan      html  css  js  c++  java
  • VUE CLI3的使用

    1、vue-cli3和2版本的区别

    ①、vue-cli3是基于 webpack4打造,vue-cli2还是webpack3

    ②、vue-cli3的设计原则是“0配置”,移除配置文件根目录下的,build和config目录

    ③、vue-cli3提供了 vue ui 命令,提供了可视化的配置,更加人性化

    ④、移除了static文件夹,新增了public文件夹,并且 index.html移动到public中


    2、使用vue-cli3创建项目

    1)进入项目需要存放的路径,vue create 项目名称

    1610026543(1)

    2)暂时选择第三个,手动添加特性

    clipboard

    点击enter,进入选择特性的界面,空格键是选择和取消选择

    clipboard

    现在我们只选择第一个,点击enter

    3)你想将你的配置文件放在哪个位置 - 选择第一个

    clipboard

    4)是否保存本次的配置以便于未来的项目使用

    clipboard

    我们选择no

    如果选择yes,那么改配置将会保存在 c盘用户文件夹下的 vue.rc文件中

    clipboard

    5)现在项目就创建完毕了

    npm run serve : 启动项目

    clipboard

    启动成功:运行在8080端口

    clipboard


    3、vue-cli3创建项目的目录结构

    clipboard

    node_modules: 依赖的包 public: 相当于vue-cli2中的static文件夹,存在静态文件之类的 src : 开发时,写代码的文件夹 .browserslistrc:存放浏览器的相关配置 .gitignore:版本控制时,需要忽略的一些文件 bable.config.js: bable(复杂化js) 的相关配置


    4、vue-cli3 配置文件的查看和修改

    vue-cli3中修改配置的几种方式

    1)、使用vue-ui

    进入cmd dos模式,输入 vue-ui

    clipboard

    选择...

    clipboard

    选择导入的项目,将刚才创建的项目导入

    clipboard

    【注意】vue-cli3创建的项目,配置隐藏在 node_modules ->@vue ->cli-service下

    (但是这里面的文件不能修改)

    clipboard

    2)在当前项目的根目录下,新建一个 vue.config.js,名称是固定的,

    当前文件下的配置,会和默认配置合并

    clipboard

  • 相关阅读:
    国债预发行
    解决GDI+的DrawString绘制带有偏移的问题
    大数据量下查询显示优化方案小结
    《提高C++性能的编程技术》 读书笔记
    基金TA系统简介
    关于做对和做好的一点思考
    调试网络断线工作心得
    双目视觉简介
    PCL中outofcore模块---基于核外八叉树的大规模点云的显示
    深度相机Astra Pro测试教程
  • 原文地址:https://www.cnblogs.com/houchen/p/14249752.html
Copyright © 2011-2022 走看看