Vue-cli使用

vue-cli

安装

npm install -g @vue/cli

yarn global add @vue/cli

安装完成后会有vue命令

vue命令的使用

vue create 项目名
如果遇到卡着不动的情况直接ctrl+c重新安装

安装插件

vue add 插件名

看到项目结构中有.vue文件,是基于vue-loader的一个文件类型,webpack会把.vue文件当做是一个模块

在vue中有三个结构

  • template html
  • script js
  • style css
    我们可以通过sc直接生成结构,前提是装了vetur插件,或者直接装vue vs code extension pack插件

当我们把{}作为模块导出时,template会变成{}中的template选项

运行项目

npm run serve

yarn serve

如果装了eslint代码规范工具,内面就不可以有console这样的东西

App.vue这个组件会直接将html文件中的#app覆盖掉,app.vue是最大的一个组件,一般情况下我们不会动它,

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • @vue/cli是vue-cli的3.0版本,更新好久了,因为项目中一直没有用到,所以一直没有学习,最近刚好有时间...
    逗农阅读 3,359评论 0 1
  • 前言最近公司新接集团项目,前端一律使用了目前较为主流的vue.js框架。作为连webpack都不大熟的人来说搭建项...
    沃尔玛对面阅读 324评论 0 0
  • 前言:使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr和预渲染两种解决方案,这...
    阿尔法乀阅读 21,652评论 25 30
  • npm install -g cnpm --registry=https://registry.npm.taoba...
    noyanse阅读 312评论 0 0
  • 时常一个感觉:忙。可即便再忙碌的日子,也会给自己一点时间,或思、或念、或想... 喜欢一句话:幸福不在路上,可是有...
    流涓阅读 399评论 0 15