一、vue-cli安装
vue-cli是一个官方vue.js项目脚手架,使用vue-cli可以快速创建vue项目。
安装vue-cli前,请确保已安装nodejs。
// 安装vue-cli,淘宝镜像安装cnpm install vue-cli -g
如果安装失败,可以使用npm cache clean清理缓存,然后再重新安装;如果再失败,还需清理缓存。安装完成后,可以使用vue -V查看版本。
cmd 输入 vue -h,可以看到可以使用的命令:
输入 vue list,可以看到可用的官方vue模板,第一个和第二个已经不用了,pwa主要是做移动端的:
二、使用webpack-simple模板生成项目(工作中使用webpack模板)
①切换到想把项目生成在这个文件中的目录;
②初始化项目;
vue init webpack-simple 项目名
注意:如果不会sass,就写N
③然后就可以切换路径到项目,下载依赖包,启动项目了。
使用webpack模板时:
三、组件的使用
单文件组件放在src下的components文件夹中:
{ { msg }}
{ { msg }}
{ { msg }}
让项目运行起来,可以看到:
就像官网说的:通常一个应用会以一棵嵌套的组件树的形式来组织。