Vue脚手架安装

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
Vue CLI: Vue command line interface  vue命令行接口
特点:
  1.一个运行时依赖 (@vue/cli-service)，该依赖：
  2.可升级；
  3.基于 webpack 构建，并带有合理的默认配置；
  4.可以通过项目内的配置文件进行配置；
  5.可以通过插件进行扩展。
  6.一个丰富的官方插件集合，集成了前端生态中最好的工具。
  7.一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装webpack工具
在安装脚手架之前确保webpack是否安装成功:
1.webpack --version			#如果查看有版本,无需安装以下步骤,如果没有版本,则需要执行以下步骤
2.cnpm i webpack webpack-cli -g   #全局安装webpack打包工具
注意事项: 以上步骤不一定必须执行

安装脚手架
1.npm i @vue/cli -g  #全局安装脚手架
2.vue -V			#查看版本
通过脚手架创建项目
1.vue create 项目名称   #创建项目
2.cd 项目名称			#进入项目目录
3.npm  run serve		#启动项目
4.项目运行在: http://localhost:8080
npx Vue -V #查看版本
npm i -D @vue/cli@4.5.15 #安装指定版本,不是全局安装 

my-app
node_mopdules	#项目依赖包
public       	#公共静态资源文件
  	  1.引入图片
      	<!-- 引入public图片, 采用项目绝对路径, -->
        <img style="width:100px" src="/qkl.jpeg" alt="">
      2.静态资源不参与压缩打包
  		index.html			#项目唯一一个页面
        src
  		assest					#静态资源文件
      	1.引入图片
        <!-- 引入assets图片,采用相对路径 -->
      	<img style="width:100px" src="../assets/img/qkl.jpeg" alt="">
        2.静态资源参与压缩打包
         components			    #公共组件 
         App.vue				#根组件
         main.js				#唯一入口文件
         
 .gitignore						#上传git忽略的文件
 babel.config.js			#babel插件的配置文件
 package-lock.json		#项目基本信息及安装依赖包的锁定版本
 package.json					#项目的基本信息及启动指令 依赖包信息
 READ.me							#解读文件