使用vue-cli创建一个spa项目

spa----单页Web应用（single page application，SPA）

1.前提

nodeJS环境已经搭建完毕

node -v
npm -v

2. 利用Vue-cli来构建spa项目

1.什么是Vue-cli

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：

​ vue init webpack xxx

注1：xxx 为自己创建项目的名称

注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境

2.安装vue-cli

npm install -g vue-cli # -g表示全局安装
npm install webpack -g

没有报错则表示安装成功

image-20230721190143051

image-20230721190235500

# cmd窗口执行,注意此处的V是大写的
vue -V

3. 使用脚手架vue-cli来构建项目

1.cmd窗口执行

vue init webpack xxx #此处的xxx指的是项目名

1.Project name：项目名，默认是输入时的那个名称spa
2.Project description：项目描述
3.Author：作者
4.Vue build：选择题
	4.1 Runtime + Compiler: recommended for most users//运行加编译，官方推荐
	4.2 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files //仅运行时
5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N  新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法
7.Set up unit tests：是否安装单元测试 N
8.Setup e2e tests with Nightwatch?：是否安装e2e测试  N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
	> Yes, use NPM                    
      Yes, use Yarn
      No, I will handle that myself     
//选择题：选第一项“Yes, use NPM”是否使用npm install安装依赖

image-20230721191349824

显示如下内容表示创建成功

image-20230721191435477

2.切换路径到这个spa项目

cd spa
npm install # 安装项目所需要的npm模块
npm run dev # 运行项目

出现以下页面表示运行成功

image-20230721192322657

4.项目结构说明

1.build 文件夹

​ 这个文件夹主要是进行webpack的一些配置

1.webpack.base.conf.js

​ webpack基础配置,开发环境,生产环境都依赖

2.webpack.dev.conf.js

​ webpack开发环境配置

3.webpack.prod.conf.js

​ webpack生产环境配置

4. build.js

​ 生产环境构建脚本

5.vue-loader.conf.js

​ 此文件是处理.vue文件的配置文件

2.config文件夹

​ 这个文件夹主要是进行webpack的一些配置

1.dev.env.js

​ 配置开发环境

2.prod.env.js

​ 配置生产环境

3.index.js

​ 这个文件进行配置代理服务器，例如：端口号的修改

3.node_modules文件夹

​ 存放npm install时根据package.json配置生成的npm安装包的文件夹

4.src文件夹

​ 源码目录(开发中用得最多的文件夹)

1.assets

​ 共用的样式、图片

2. components

​ 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

3.router

​ 设置路由

4.App.vue

​ vue文件入口界面

5.main.js

​ 对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

5.static文件夹

存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置, 对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

6.package.json

​ 这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

5.什么是.vue文件

.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。 每个.vue文件包含三种类型的顶级语言块