通过官方脚手架,(命令行的方式)搭建模块化,工程化,自动化开发环境
1、查看版本(这是查看脚手架的版本)
vue -V
2、如果版本是低于3.X,那么卸载脚手架,安装最新的。
npm uninstall vue-cli -g
3、安装(脚手架工具)
1) 装脚手架工具的3.x/4.x
npm install -g @vue/cli
2)桥接2.X(兼容脚手架2.X)
npm install -g @vue/cli-init
4、创建项目:使用脚手架搭建项目(文件夹)
1)、如果想搭建版本 v3.x/4.x
vue create 项目目录
2)、如果想搭建版本 2.X
vue init webpack 项目目录
注意:项目目录,不要和官方的或者第三方的模块重名,也不要使用汉字(每一级文件夹尽量不要使用汉字)
当然,直接copy他人生成的项目环境也是可以的。
脚手架搭建好的项目的讲解
1)、vue-cli2.X
build文件夹: webpack的相关配置
config文件夹:项目环境的配置。
src文件夹:源代码的文件夹
src/assets文件夹: 存放静态资源(css,图片,字体文件,视频,音频等等),这些静态资源会做(webpack)打包处理(编译)
src/components文件夹: 所有的组件
src/App.vue:main.js所引入的App.vue是模板(main.js里的Vue对象的模板)
src/main.js: 就是唯一的html文件所对应的唯一的Vue对象(根实例)。入口文件。
static文件夹:存放静态资源(但是该文件夹下的文件不做(webpack)打包处理)。
index.html:唯一的HTML文件。
2)、vue-cli3+(相同之处就不说了)
区别:
隐藏了build和config文件夹
把static文件夹变成了public文件夹:放置静态资源,把唯一的index.html也放在了public下。