vue-cli3 简易教程

Vue CLI3 Tuorial

本文图片居多 因为涉及不到太多代码

cli官网

安装/执行命令

npm uninstall -g vue-cli 
npm install -g @vue/cli
vue create myapp 

创建项目

• vue create <项目名>

结果

• 先选择默认即可

目录结构

• 如果选择自定义项目依赖 就选择最后一项

  
  image.png

• 挑选router vuex cssprocessor这几个常用的 接下来会遇到各部分的选项

  
  我的选择如图

• 最后点击Enter 执行 如果node-sass安装出问题 就用cnpm安装一下
  

  目录结构

添加插件

vue add 插件名
vue add babel
然后查看package.json 里会有添加的插件
请注意前缀 会自动加上@vue/cli-plugin-<插件名>
npm cache clean --force 清理缓存的

• 添加vuetify
  vue add vuetify

  
  多个文件被修改

你会发现项目中很多文件都被改了 而且启动后首页都不一样了

vuetify的首页

可视化管理项目 - 项目管理器

vue ui 来启动可视化管理界面

项目管理器

• 导入项目 项目文件夹旁边会有个vue的logo表示这是个vue项目

上述所有操作都可以用可视化进行操作 都可以找到很方便

以上就是vue-cli的简易教程