一、什么是脚手架
用于快速生成vue项目基础架构
二、安装
npm install -g @vue/cli
查看版本:
vue -V
三、基于脚手架创建vue项目:
1、 vue create my-project
2、 Manually select features
VueCLI脚手架基础
3、 选择项目内容
VueCLI脚手架基础
4、 选择路由
VueCLI脚手架基础
5、 选择SASS
VueCLI脚手架基础
6、 选择ESLint
VueCLI脚手架基础
7、 Lint
VueCLI脚手架基础
8、 配置文件
VueCLI脚手架基础
9、 是否保存模板
VueCLI脚手架基础
10、运行代码提示
VueCLI脚手架基础
11、进入项目文件夹下,运行npm run serve
VueCLI脚手架基础
12、在浏览器中打开http://localhost:8080/
13、运行效果如下(创建成功)
VueCLI脚手架基础
四、脚手架项目结构分析
VueCLI脚手架基础
Src文件夹目录:
1、assets可能会用到的资源(图片)
2、components可能会用到的组件
3、views视图相关的组件
4、main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件
5、App.vue是我们项目的根组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件

相关文章:

  • 2021-10-30
  • 2021-08-31
  • 2022-12-23
  • 2021-05-29
  • 2021-04-25
  • 2021-06-20
  • 2021-08-06
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-25
  • 2021-09-25
  • 2022-12-23
  • 2021-08-26
相关资源
相似解决方案