vue脚手架安装与项目创建步骤
1、cmd终端 输入 npm i -g @vue/cli 全局下载 vue-cli 组件
2、输入 vue -V 返回版本号即下载成功
3、输入 'cd 目标文件夹路径' 或 从目标文件夹 打开 cmd 终端
4、输入 vue create 自定义项目名称 创建脚手架项目
5、通过键盘上下键选择创建什么类型的项目
6、输入 cd 项目名称 进入项目
7、输入 npm run serve 运行项目。输入 npm run build 可以打包项目
8、浏览器打开任一网址
9、输入 Ctrl + C 即可停止运行项目
注意 关闭cmd终端也可停止运行项目,再次打开网页需要重新打开cmd终端 进入项目 输入 npm run serve 重新运行项目
脚手架目录详解
1、dist 文件夹 是打包后生成的文件夹
2、node_modules 是项目所需要的依赖文件
3、pblic 是项目所需要的图片和假的数据json文件,包括index.html文件
4、src 是资源文件夹
(1)assets 是静态图片资源文件夹
(2)components 是放置 vue 组件的文件夹
(3)app.vue 是入口的首个vue文件,也是页面的根组件,可以理解成 index.html 页面
(4)main.js 是首个入口js文件,可以理解成 index.html 页面的 js 文件
5、gitignore 是用来告诉脚手架有哪些文件不需要被上传到git仓库中,比如node_modules 和 /dist文件
6、babel.config.js 把 es6或es7 转成浏览器可以识别的比如 es5 的语法,做到兼容可以编写高级js语法的作用
7、package-lock.json 写的是对依赖文件的一些描述,比如某依赖文件需要 babel7 以上的版本,node 需要 6 以上的版本
8、package.json 是项目的表述,比如启动的命令有哪些,生产环境需要用到哪些库,开发环境需要用到哪些库,描述你的项目大概有多少浏览器兼容
9、README.md 项目启动所需要执行的命令,比如安装依赖,开发环境启动项目,生产环境打包项目,是否启动语法规范