云村小威

【Vue】安装并使用vue-cli搭建SPA项目

一、Vue-cli安装

1.1 什么是Vue-cli

1.2 安装Vue-cli

1.3 使用Vue-cli构建项目

二、SPA项目

2.1 导入、运行SPA项目

2.2 vue项目结构说明

2.3 .什么是*.vue文件

2.4 基于SPA项目完成路由

2.5 基于SPA项目完成嵌套路由

一、Vue-cli安装

1.1 什么是Vue-cli

Vue CLI是一个基于Vue.js的官方脚手架工具，用于自动生成vue.js+webpack的项目模板，快速搭建Vue.js项目的开发环境。它提供了一套交互式的命令行界面，可以帮助开发者初始化项目、配置构建工具、管理依赖等。Vue CLI集成了一些常用的开发工具和最佳实践，使得开发者可以更加高效地开发Vue.js应用程序。

创建命令：vue init webpack xxx

xxx 为自己创建项目的名称

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

1.2 安装Vue-cli

命令：npm install -g vue-cli

在cmd窗口输入如下命令，验证vue安装是否成功，注意：这里的V是大写。如果成功会打印版本号

vue -V

1.3 使用Vue-cli构建项目

在需要保存的文件路径中打开cmd命令窗口，创建项目存放目录，运行如下命令：

vue init webpack 项目名

接下来，安装程序会进入一问一答的安装模式：
1）Project name：项目名，默认是输入时的那个名称ycxw_spa，直接回车
2）Project description：项目描述，直接回车
3）Author：作者，随便填或直接回车
4）Vue build：选择题，一般选第一个
Runtime + Compiler: recommended for most users //运行加编译，官方推荐
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时
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

全部选择好回车就进行了生成项目:

最后出现 Project initialization finished! 就下载好了：

二、SPA项目

2.1 导入、运行SPA项目

找到之前构建的spa项目的文件路径，在编程软件中导入：

1. 回到我们的cmd命令窗口输入该命令

cd 项目名（ycxw_spa）

2. 输入 npm run dev 命令运行

打开此网页即可运行：

2.2 vue项目结构说明

文件夹：build

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

文件：
webpack.base.conf.js   webpack基础配置,开发环境,生产环境都依赖
webpack.dev.conf.js   webpack开发环境配置
webpack.prod.conf.js   webpack生产环境配置
build.js   生产环境构建脚本
vue-loader.conf.js   此文件是处理.vue文件的配置文件

文件夹：config

作用：配置文件

文件：
dev.env.js   配置开发环境
prod.env.js   配置生产环境
index.js   这个文件进行配置代理服务器，例如：端口号的修改
node_modules       存放npm install时根据package.json配置生成的npm安装包的文件夹

文件夹：src

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

文件：
assets   共用的样式、图片
components   业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
router   设置路由（定义路由与组件之间的关系）
App.vue   vue文件入口界面
main.js   对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

static文件夹：

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

package.json：

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