使用vue-cli创建模板项目并运行访问

一、验证是否安装vue、vue-cli及环境，如下图所示已安装

安装过程参考：https://blog.csdn.net/li1325169021/article/details/100765894 vue-cli 是vue 官方提供的脚手架工具 github: https://github.com/vuejs/vue-cli

二、打开window命令行，进入需要安装的位置路径，如下图：

说明：作者的安装位置为（D:\vueProjects\）

三、创建vue项目步骤

1、vue的6种模板模式如下图： 2、创建vue项目命令

#命令
#webpack 模板名称
#vue_demotest 项目名称（格式不能为大写，项目名自己随意起名字，例作者的项目名为vue_demotest）
vue init webpack vue_demotest

3、下载过程如下：需等待下载完成 4、下载完成，如下图： 5、D:\vueProjects\下会出现vue_demotest项目名，vue_demotest目录结构如下图

|-- build : webpack 相关的配置文件夹(基本不需要修改)
	|-- dev-server.js : 通过express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
	|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
	|-- components: vue 组件及其相关资源文件夹
	|-- App.vue: 应用根主组件
	|-- main.js: 应用入口js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的readme 文件

四、运行vue项目

#运行命令
cd vue_demotest
npm install
npm run dev

五、测试是否运行成功，如下图表示运行ok